localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结

cookie 和 session

cookie 和 session 都是广泛用来跟踪浏览用户身份的会话方式。

cookie 和 session 区别

• cookie 数据存放在客户端，session 数据放在服务器端。
• cookie 自己并不安全，考虑到安全应当使用 session。
• session 会在必定时间内保存在服务器上。若是访问量比较大，会比较消耗服务器的性能。考虑到减轻服务器性能方面的开销，应当使用 cookie 。
• 单个 cookie 保存的数据不能超过 4K，不少浏览器都限制一个域名最多保存 50 个 cookie。 将登录信息等重要信息存放为 session、其余信息若是须要保留，能够放在 cookie 中。

session 主要是服务端使用处理数据，本文主要针对前端技术故很少赘述。

cookie 的使用

cookie 可经过 document.cookie 获取所有 cookie。它是一段字符串，是键值对的形式。操做起来有些麻烦，可引入封装好的库进行使用，好比 js-cookie点我。API 也很简洁：

Cookies.set("name", "value", { expires: 7 }); // 设置一个cookie，7天后失效

Cookies.get("name"); // => 'value'

Cookies.remove("name");
复制代码

localStorage 和 sessionStorage

在 web 本地存储场景上，cookie 的使用受到种种限制，最关键的就是存储容量过小和数据没法持久化存储。

在 HTML 5 的标准下，出现了 localStorage 和 sessionStorage 供咱们使用。

• cookie、localStorage 以及 sessionStorage 的异同点：

分类	生命周期	存储容量	存储位置
cookie	默认保存在内存中，随浏览器关闭失效（若是设置过时时间，在到过时时间后失效）	4KB	保存在客户端，每次请求时都会带上
localStorage	理论上永久有效的，除非主动清除。	4.98MB（不一样浏览器状况不一样，safari 2.49M）	保存在客户端，不与服务端交互。节省网络流量
sessionStorage	仅在当前网页会话下有效，关闭页面或浏览器后会被清除。	4.98MB（部分浏览器没有限制）	同上

• 应用场景：localStorage 适合持久化缓存数据，好比页面的默认偏好配置等；sessionStorage 适合一次性临时数据保存。

WebStorage( localStorage 和 sessionStorage ) 自己就提供了比较好用的方法：

localStorage.setItem("name", "value");
localStorage.getItem("name"); // => 'value'
localStorage.removeItem("name");
localStorage.clear(); // 删除全部数据

sessionStorage.setItem("name", "value");
sessionStorage.setItem("name");
sessionStorage.setItem("name");
sessionStorage.clear();
复制代码

注意事项：

• localStorage 写入的时候，若是超出容量会报错，但以前保存的数据不会丢失。
• localStorage 存储容量快要满的时候，getItem 方法性能会急剧降低。
• web storage 在保存复杂数据类型时，较为依赖 JSON.stringify，在移动端性能问题比较明显。

浏览器兼容性

cookie 兼容性彻底没问题；localStorage 和 sessionStorage 也支持 IE8+ 的浏览器，基本均可以正常使用。

课外

另外留个小问题，除了手动设置 localStorage.clear()，还有哪些方式会丢失 localStorage？

关于咱们

快狗打车前端团队专一前端技术分享，按期推送高质量文章，欢迎关注点赞。 文章同步发布在公众号哟，想要第一时间获得最新的资讯，just scan it ！

参考

• localStorage - MDN
• web storage 测试
• 各浏览器 Cookie 大小、个数限制