上一篇文章分析了cookie,也提到了使用cookie的缺陷。正因如此,出现了HTML5 的 Web Storage。
出现的原因:就是看不惯数据在客户端和服务器端传来传去的,多耗能啊~~~
Web Storage规范包含了两种对象定义:sessionStorage 和 globalStorage,这两个对象在支持的浏览器中都是以windows对象属性的形式存在的。IE8+
与cookie的比较
存储类型数据 | 存储大小 | 有效时间 | 传输比较 |
cookie | 4KB | 默认是窗口或浏览器关闭。设置时间的话就在设置的时间之前一直有效 | cookie在浏览器和服务器间来回传递 |
localStorage | 大多数浏览器是5M | 数据保留到通过 JavaScript 删除或者是用户清除浏览器缓存 | 仅本地保存 |
sessionStorage | 因浏览器而异,有的没限制,有的是5M | 浏览器关闭之前都有效 | 仅本地保存 |
共同点:sessionStorage、localStorage、cookie都是在浏览器端存储的数据。
Storage类型
方法如下:
- clear() 删除所有值
- getItem(name) 根据指定的名字 name 获取对应的值
- key(index) 获得 index 位置处的值的名字
- removeItem(name) 删除由 name 指定的名值对
- setItem(name, value) 为指定的 name 设置一个对应的值
sessionStorage
sessionStorage是Storage对象的一个实例,所以拥有上面的方法,这也是为什么要先说Storage类型。操作一下:
//使用方法存储数据
sessionStorage.setItem("name", "pyc");
//使用属性存储数据
sessionStorage.book = "JavaScript";
两种方法都可以,通过属性或者是上述的方法。虽然属性和方法都可以,但是还是建议使用方法,以免某个键会意外重写该对象上已存在的成员。
//获取
sessionStorage.getItem("name"); // 'pyc'
sessionStorage应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据localStorage。
localStorage
localStorage 对象在修订过的 HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage。
localStorage也是Storage的实例,所以也可以和上面sessionStorage一样的使用方法。
为了兼容只支持 globalStorage 的浏览器,可以使用以下函数。
function getLocalStorage(){
if (typeof localStorage == "object"){
return localStorage;
} else if (typeof globalStorage == "object"){
return globalStorage[location.host];
} else {
throw new Error("Local storage not available.");
}
}
// 使用方法
let storage = getLocalStorage();
参考资料:
https://blog.csdn.net/viewyu12345/article/details/83055271
http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html