一、HTML 本地存储localStorage
1. localStorage的使用
localStorage不受浏览器窗口进程的限制，只要使用localStorage保存的数据，即使在新打开的浏览器窗口或者浏览器关闭后，数据依然存在。
网站在页面加载完毕后可以通过JavaScript来获取这些数据。要注意的是，在不同的浏览器中localStorage存储的数据是不能相互访问的，比如在Firefox中的localStorage存储的数据，是不能在IE或者Chrome中访问读取的。
判断是浏览器是否支持localStorage：
<script>
function support_storage() {
if (window.localStorage){
alert("true")
}else {
alert("false")
}
}
window.onload=function () {
support_storage()
}
</script>
2. localStorage的应用场合
使用localStorage存储的场合非常多，比如当一个在线的任务，需要用户填写大量的表单和数据，并且在指定的时间间隔后，才把这些数据发送到服务端。
在线购物时，用户的购物车，使用localStorage可以在购物车中保存更多的数据，等用户下次再登录时，购物车中的数据依然是存在的。或者开发的离线应用程序，用户在离线状态下把数据填写好，等在线的时候，再一次性把数据进行提交。
3. localStorage的创建和使用方法
每个localStorage对象都可以存储一系列key/value变量，key可看作变量名，value可看作变量值，使用JavaScript可以轻松地对key/value变量进行操作，常见的操作方法如下：
localStorage.length：返回限制已经存储的变量的个数。
localStorage.key(i)：返回第i个变量的键(key)。
localStorage.getItem(key)：和**localStorage.key(i)**一样，取得键为key的变量的值(读取数据)。
localStorage.setItem(key,value)：和localStorage.key=value一样，设置键为key的变量值(保存数据)。
**localStorage.removeItem(key)：**删除键为key对应的变量。
**localStorage.clear()：**清空所有变量。
示例：
<script>
function support_storage() {
localStorage.setItem(1, "hello1")
localStorage.setItem(2, "hello2")
localStorage.setItem(3, "hello3")
alert("本地存储的localStorage个数：" + localStorage.length)
alert("返回第2个变量的键(key)：" + localStorage.key(2))
alert("获取键为1对应的value：" + localStorage.getItem(1))
// localStorage.removeItem(1)
// localStorage.clear()
}
window.onload = function () {
support_storage()
}
</script>
4. localStorage存储特殊类型
Web Storage不是只能处理字符串吗？那么如何存储复杂对象数据呢？
1.可以使用json对象来存储复杂对象的数据
2.利用json对象的stringify()方法，将复杂对象转变成字符串，存入Web Storage中。当Web Storage中读取时，可以通过json对象的parse()方法再转换成json对象
示例1：
<script>
window.onload = function() {
var jsonstr = {
"id" : "1",
"name" : "张三"
};
var jsonValue = JSON.stringify(jsonstr);//将JSON对象转换成字符串
alert(jsonValue);
localStorage.setItem(jsonstr.id, jsonValue);
var jsondata=localStorage.getItem("1");
var jsonObject=JSON.parse(jsondata);//将localStorage中的json字符串转换到JSON对象
alert(jsonObject.name);
}
</script>
示例2：
<script>
window.onload = function() {
}
function save() {
var name = document.getElementById("name").value;
var mobile = document.getElementById("mobile").value;
var address = document.getElementById("address").value;
var jsonObject = new Object();
jsonObject.name = name;
jsonObject.mobile = mobile;
jsonObject.address = address;
var jsonStr = JSON.stringify(jsonObject);//将JSON对象转换到字符串
localStorage.setItem(mobile, jsonStr);
}
function search() {
var mobile = document.getElementById("inputMobile").value;
var jsonStr = localStorage.getItem(mobile);
var jsonObject = JSON.parse(jsonStr);//将localStroage中的json字符串转换成JSON对象
if (jsonObject == null) {
document.getElementById("show").innerHTML = "未找到该手机对应的用户";
} else {
document.getElementById("show").innerHTML = mobile + "的机主是："
+ jsonObject.name + ",地址：" + jsonObject.address;
}
}
function showlist() {
var list = document.getElementById("list");
var html = "";
html += "<table border='1'>";
html += "<tr><td>手机号</td><td>机主</td><td>地址</td></tr>";
for (var i = 0; i < localStorage.length; i++) {
html += "<tr>";
var key = localStorage.key(i);
var values = localStorage.getItem(key);
var jsonObject = JSON.parse(values);
html += "<td>" + key + "</td>";
html += "<td>" + jsonObject.name + "</td>";
html += "<td>" + jsonObject.address + "</td>";
html += "</tr>";
}
html += "</table>";
list.innerHTML = html;
}
window.addEventListener("storage", function(e) {
alert(e.key + "的值被网页：" + e.url + "，由" + e.oldValue + "改变为：" + e.newValue);
console.log("数据改变了！");
}, false);
</script>
</head>
<body>
姓名:
<input type="text" id="name" />
<br /> 手机:
<input type="text" id="mobile" />
<br /> 地址:
<input type="text" id="address" />
<br />
<input type="button" onclick="save()" value="新增" />
<hr />
输入手机号：
<input type="text" id="inputMobile">
<input type="button" onclick="search()" value="查询机主" />
<div id="show"></div>
<br />
<input type="button" onclick="showlist()" value="显示所有列表信息" />
<div id="list"></div>
</body>
二、HTML 会话存储SessionStorage
1. SessionStorage的使用
SessionStorage和localStorage最大的一个区别是：SessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前存储的就已经被清除。而localStorage是一个持久化的存储，并不局限于会话。
SessionStorage方法针对一个session进行数据存储，当用户关闭浏览器后，数据删除。如果不需要在用户新打开一个窗口依然能被访问，可以使用SessionStorage。比如：在运行某个应用的两个实例或者在运行多个窗口浏览时，不希望数据之间有关联，可以使用SessionStorage。
sessionStorage的存储数据、获取数据方法和localStorage相同，示例：
<script>
window.onload = function() {
sessionStorage.setItem("hobby", "唱歌");
}
</script>