浅析H5 本地数据持久化cookie, localStorage和sessionStorage

localStorage和sessionStorage 都是H5的新特性，是Web Storage的一种存储方式，都是用来存储客户端临时信息的对象。

这两者区别在于localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

而sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

简单理解就是当你打开一个浏览器的页面时记录 sessionStorage,当你把页面或者浏览器关闭时sessionStorage中的数据即销毁
 

API：

localStorage:

window.localStorage.setItem(key, value); //设置值
window.localStorage.getItem(key); // 获取值
window.localStorage.removeItem(key); // 删除某个值
window.localStorage.clear(); //清空所有存储

sessionStorage:

window.sessionStorage.getItem(key);
window.sessionStorage.setItem(key, value);
window.sessionStorage.removeItem(key);
window.sessionStorage.clear();

实战：

var obj = {"name":"xiaoming","age":"16"};
window.localStorage.setItem('userInfo', JSON.stringify(obj));
var userInfo = window.localStorage.getItem('userInfo');
console.log(userInfo); // {"name":"xiaoming","age":"16"}

可以看到在本地localStorage中key:userInfo, value:{"name":"xiaoming","age":"16"} 已经存储了

当执行：window.localStorage.removeItem('userInfo') 后，再查看发现key,value都已经被删除了

当然还有cookie,cookie可以理解为是一段文字文本，是在服务器端生成，存储在客户端的一种文本。

写入cookie：document.cookie = 'key=value;expires=过期时间戳'；

读取cookie：var currentCookie = document.cookie;

删除cookie: document.cookie = 'key=value;expiers=过期时间戳+time'

注意一般过期时间戳是Date对象，比如 expires = new Date(new Date().getTime(1000)).toGMTString();转成格林威治时间