一，web数据存储
就是让网页的数据在计算机上存储一段时间，可以是临时存储也可以是长期存储，如cookie
数据存储分为两种
1.1本地存储
对应localStorage对象，用于长期保存网站的数据，如有的网页登录密码保存一周等
2.2会话存储
对应sessionStorage对象，用于临时保存，浏览器关闭数据也就没了
大多数浏览器都把本地存储限制为5MB以下
二，存储数据
假设你想存储一个用户名，那么这个名字叫“name”，你可以在文本框输入文本并弹窗读出你之前写的用户名
var userinput = document.getElementById("userinput");
var btn = document.getElementsByTagName("input")[1];
btn.onclick = function(){
localStorage["name"] = userinput.value;
alert("名字是"+localStorage["name"]);
}
而会话存储就是把localStorage换成sessionStorage。
举例如迷宫游戏中,用户每次关闭页面在重新打开页面时页面提示保存当前位置,那么就可以存储在localstorage中来记录位置
web存储支持情况
| 浏览器 | IE | Firefox | Chrome | safari | opera | safari ios | Android |
|---|---|---|---|---|---|---|---|
| 版本 | 8 | 3.5 | 5 | 4 | 10.5 | 2 | 2 |
三,删除数据
- removeItem()方法 里面传入键名就可以删除不想要的数据
localStorage.removeItem("name")
- clear()方法 清空本地保存会话数据
四，查找所以数据项
- key（）方法
btn3.onclick = function(){
var ul = document.getElementsByTagName("ul")[0];
ul.innerHTML = " ";
for(var i=0;i<localStorage.length;i++){
//取当前数据项的键
var key = localStorage.key(i);
//获取数据项的值
var val = localStorage[key];
var oli = document.createElement("li");
oli.innerHTML = key+":"+val;
ul.appendChild(oli);
}
}
注意web存储数据会自动转换为文本
- 对于数字而言
用number（）函数来处理
Number(localStorage[val])
- 对于日期而言
会保存一串字符串
today = new Date(sessionStorage [time]);
五，web保存对象
web存储数字和日期会自动转换为文本，那么自定义的对象怎么转换呢
为了把自定义对象存储web中，必须先把对象转换为文本形式，所以JSON编码诞生
JSON（JavaScript Object Notation）对象表示方法，是一种对象转换文本的简便格式
5.1JSON.stringify()将对象转换为文本
5.2 JSON.parse() 将文本转换为对象
如果你想将对象放在在web存储中，那么就使用json,stringify(value)方法将值放在web存储(local,session)中,然后再从会话存储中取出用json.parse(value)方法将其转换为对象
六，响应存储变化
就是浏览器不同窗口间的通信机制，简单来说就像我和你打视频电话，我这边的一举一动都会在你的显示器上展示出来
这里就如两个页面，第一个页面我要添加名字，那么第二个页面很快就显示出来你在第一个页面中添加的名字
那么这就是window.onstorage事件
就是你在1.html页面中改变了本地存储，那么在2.html的页面中会触发onStorage事件（必须是同台计算机相同浏览器打开的页面）
那么我在点击添加按钮时，第二个页面就显示出来了结果
当然上面两个图片涉及两个页面
第一个页面负责保存数据到本地存储
键:<input type="text" id="key"><br>
值:<input type="text" id="value1"><br>
<input type="button" id="btn" value="添加" onclick="addValue()">
<script>
function addValue(){
var key = document.getElementById("key").value;
var value1 = document.getElementById("value1").value;
var btn = document.getElementById("btn");
//保存数据项
localStorage[key] = value1;
}
</script>
第二个就是在页面加载中为window.onStorage
添加一个处理函数
<div id="update"></div>
<script>
function storageChanged(e){
var message = document.getElementById("update")
message.innerHTML+="<br>key:"+e.key;
message.innerHTML +="<br>value:"+e.newValue;
}
window.onload = function(){
//将storage和storageChanged两个函数连接起来
window.addEventListener("storage",storageChanged,false)
}
</script>
当然在onStorage中也提供了许多api
原来的值oldValue
新值newValue
导致此次变化的页面URL
