今天来和大家一起聊聊HTML5提供的两种存储数据的方法:
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储（当关闭浏览器标签页时数据会丢失）
下面分别对这两种方法进行分析：
localStorage
将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在，作为一个长期保存。（除非人工清除）
sessionStrage
session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长,作为临时保存。
配合本地存储时还需要用到下面的一些功能
- setltem('key', value) 存储(以对象的形式进行存储)
- getltem('key') 获取(对应的key便可以拿到值)
- removeItem('key') 清除存储的key
- clear(); 清空数据
下面我们简单封装一个大家网页中常见的输入登录框及密码的实例：
var $ = function(id) {
return document.getElementById(id);
}
$('submit').onclick = function() {
var user = $('user').value;
var password = $('password').value;
var ls = window.localStorage; //永久存储
var ss = window.sessionStorage; //临时存储
ls.setItem('user', user); // 以key, value的形式进行存储
ss.setItem('password', password);
}
~function() { //自执行函数
var ls = window.localStorage;
var ss = window.sessionStorage;
var user = ls.getItem('user'); // 获取key的值并赋值给一个变量
var password = ss.getItem('password');
$('user').value = user; // 将获取到的值赋值给元素的value
$('password').value = password;
}();
Han.PNG
大家可以看到代码中用到了两种存储，一种是将用户名永久存储，而密码则是临时存储，在我关闭页面时，它会自动删除。这是大家经常见到的应用。
说到这里，又出现了一个新的问题，存储的时候有各种不同的数据类型，
我们来看一下存储基本数据类型和复杂数据类型时有什么不同。
Han.png
使用上面的存储或获取的方法时，会自动将内容使用toString方法进行转换
如果是对象或是数组直接使用这个方法，得到的结果不是想要的，所以需要通过序列化的方法，现将数组或对象进行转义
H.png
对象的序列化：JSON.stringify(obj)
将数组或对象序列化为对应的字符串 和toString方法结果不一样
序列化后便可以通过localStorage进行本地存储
对象的反序列化：JSON.parse(str)
参数必须为一个已序列化的字符串(配合上面使用)
如果不进行反序列化，会以字符串的形式进行读取，反序列后会成为引用类型的对象或数组。
当然方法还有很多种，如果不写通过序列化，还可以使用拼接
Han.jpg
