前端数据存储之cookie、LocalStorage与SessionStorage

最新推荐文章于 2025-03-23 13:06:04 发布

原创

最新推荐文章于 2025-03-23 13:06:04 发布 · 1.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#js

JS详解Cookie、LocalStorage与SessionStorage

基本概念

Cookie
Cookie是小甜饼的意思。顾名思义，cookie确实非常小，它的大小限制为4KB左右。他的主要用途又保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage是HTML5标准中新加入的技术，它并不是什么划时代的新东西。早在IE6时代，就有一个叫userData的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用Flash
。而如今，localStorage被大多数浏览器所支持，如果你的网站需要至此IE6+，那么userData作为你的polyfill的方案是种不错的选择。

sessionStorage

sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。做过后端开发的同学应该知道Session这个词的意思，直译过来是”绘话“。而sessionStorage是一个前端的概念，它只是可以将一部分数据在当前绘话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage中的数据就会被清空。

三者的异同

特性	Cookie	localStorage	sessionsStorage
数据的生命周期	一般由服务器生成，可设置失效时间。如果浏览器端生成Coolie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有小，关闭页面或者浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5KB
与服务器端通讯	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（浏览器）中保存，不参与和服务器的通信	仅在客户端（浏览器）中保存，不参与和服务器的通信