localStorage
过期:永久存储,永不失效,除非手动删除
大小:每个来源5MB(大多数浏览器)
常用API:
- 设置:
localStorage.setItem(key,value)
- 获取:
localStorage.getItem(key)
- 删除:
localStorage.removeItem(key)
- 获取第n个key值:
localStorage.key(n)
,n从0开始
localStorage.key(0); // "jfVersion"
localStorage.key(1); // "login-service"
- 清除当前域名下全部数据:
localStorage.clear()
- 获取数据数量:
localStorage.length
- 获取所有数据:
localStorage.valueOf()
sessionStorage
过期:在页面会话结束时被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话,关闭浏览器会结束会话。
大小:根据浏览器不同而不同,一般是2.5MB或5MB
常用API:与localStorage
相似
注意事项
- 无论是
localStorage
还是sessionStorage
中保存的数据都仅限于该页面的协议,即都遵循同源策略(协议,主机名,端口)。 - 只能存储字符串。其他比如数组,json数据,图片等需要被序列化成字符串后再存储。
- 注意判断浏览器是否支持。
- 避免把敏感的信息存储到本地。
- 注意key的唯一性,重复对一个key赋值会覆盖原来的。
- 子域名之间不能共享存储数据。
- 存入数据的时候需要异常处理(
try catch
),避免超出容量报错。超出容量大小后可以使用一些如LRU,FIFO的算法淘汰一些数据。 - 两者都不会被发送到服务器端。
使用场景
- 使用本地数据,减少网络传输。
- 弱网络环境下,高延迟,低带宽,尽量把数据本地化。