![19d1c333bffd3bd00a49415f2e5ec1ea.png](https://img-blog.csdnimg.cn/img_convert/19d1c333bffd3bd00a49415f2e5ec1ea.png)
打开UC浏览器 查看更多精彩图片
在做项目的过程中,我们经常遇到需要把信息存储在本地的情况,比如权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等,我们可以暂存一下避免浏览器不必要的请求和客户多余操作,给客户使用带来方便。
这篇文章主要介绍localStorage和sessionStorage。
HTML5中 Web Storage 的出现,主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小,而且数据会自动携带到请求头里,但服务器端可能并不关心这些数据,所以会造成带宽的浪费。
Web Storage 提供了两个存储对象:localStorage 和 sessionStorage。
sessionStorage 存储的数据仅在本次会话有用,会话结束后会自动失效,而且数据仅在当前窗口有效,同一源下新窗口也访问不到其他窗口基于sessionStorage 存储的数据。也是由于这些特性,导致 sessionStorage 的使用场景会比较少。
localStorage 可以永久存储,而且同源下数据多窗口也能共享。看起来很美好,但 localStorage 也有短板,绝大多数浏览器有 5M 的大小限制。但是这不足以成为大家使用 localStorage 的障碍,要知道 Cookie 只有 4K 的大小,多了一千多倍