html5 本地储存

HTML5的几种存储方式

html5在引入webStorage之前，主要用cookies.

 

web storage

html5的webstorage 分两种：LocalStorage 和SessionStorage，两者的差别主要在生命周期不同。

LocalStorage ：除非手动删除，否则永久存储在浏览器内

SessionStorage ： 页面关闭的时候自动删除

 

使用方法 

localStorage.setItem('key', '123456789'); //存储
localStorage.getItem('key'); //获取

sessionStorage.setItem('key', '123456789'); //存储
sessionStorage.getItem('key'); //获取

注意点

LocalStorage和sessionStorage存储的值必须是“字符串”，所以如果要把一个json对象存储在LocalStorage或者sessionStorage，需要对格式化下json，如 ：

var json = {
    name : 'tom'
};
localStorage.setItem('key', JSON.stringify(json)); //json对象转成字符串存储
JSON.parse(localStorage.getItem('key')); //获取的时候，把字符串转成json对象

 

webstorage 与cookie的区别

存储大小限制不同

cookie的存储数据大小要求大概在4kb。而sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5m或者更大。

生命周期有所不同

cookie的生命周期一般在其设置的过期时间之前有效，超过有效期的cookie，浏览器会自动删除。

sessionstorage仅在关闭窗口前有效

localstorage持久有效，直到手动删除

作用域不同

sessionstorage：只能在同一个页面中共享数据

localstorage ：只要页面是在同一个浏览器打开的，不同的项目都可以访问localstorage的数据

cookie：cookie则同时拥有sessionstorage和localstorage作用域功能，既可以在不同的项目中访问cookie，也可以设置只能在同一个项目中访问cookie（通过设置cookie的path来实现）

web storage支持事件通知机制

可以将数据更新的通知发送给监听者