浏览器端本地数据存储

本地存储

• 数据存储在用户浏览器中
• 设置、读取方便、页面刷新不丢失数据
• 容量较大
• 只能存储字符串数据，可将对象JSON.stringify()编码后存储

window.sessionStorage

• 可存储约5M左右的数据

特性

• 生命周期为关闭浏览器窗口(非浏览器 仅tab)
• 在同一个窗口下（页面）数据可以共享
• 以键值对的形式存储使用

//存储数据
sessionStorage.setItem(key,value);

///读取数据
var result = sessionStorage.getItem(key);

//删除数据
sessionStorage.removeItem(key);

//清除所有数据
sessionStorage.clear();

*可通过 F12 -> Application -> Storage -> Session Storage

window.localStorage

• 可存储约20M左右的数据

特性

• 生命周期永久生效，除非手动删除 否则永久存在
• 多窗口（页面）共享，同一个浏览器可以共享
• 以键值对形式存储使用

//存储数据
localStorage.setItem(key,value);

//读取数据
var result = localStorage.getItem(key);

//删除数据
localStorage.removeItem(key);

//清除数据
localStorage.clear();