前端本地存储小总结

最新推荐文章于 2025-10-09 15:15:52 发布

原创最新推荐文章于 2025-10-09 15:15:52 发布 · 238 阅读

CC 4.0 BY-SA版权

1. cookie

作用：存储数据，当用户访问了某个网站的时候，我们可以通过 cookie 来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行 session 跟踪储存来用户本地终端上的数据

特征
1.不同浏览器存放 cookie 的位置也不一样，也是不能通用的。
2. cookie 的存储是以域名形式区分的，不同的域存储的cookie是独立的。
3. 我们可以设置 cookie 生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的 cookie 是当前域以及当前域下的所有子域。
4. 一个域名下存放的 cookie 的个数是有限制的，不同浏览器存放的个数不一样，一般为20个。
5. 每个 cookie 存放的内容大小也是有限制的，不同的浏览器存放大小不一样，一般为4KB。
6. cookie 可以设置过期的事件，默认是会话级别的，或者过了设置的日期自动销毁。

cookie主要用于下面几个方面

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

cookie 的方法

expires：
通常设置 cookie 的生效时间，默认浏览器关闭后就没有了
domain 和 path：damain 是域名，path是路径。domain + path构成 url （默认为该cookie 所在域名所在目录），用来限制被哪些 url 访问

secure：
通常 cookie 信息都是使用 HTTP 连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传递。secure 选项用来设置 cookie 只在确保安全的请求中才会发送。当请求时 HTTPS 或者其他安全协议时，包含 secure 选项的 cookie 才能被发送至服务器。

httpOnly：
设置 cookie 是否能通过 js 去访问（禁止客户端通过 js 对 cookie 进行增删改查，来确保用户信息和服务器安全性）

第三方 cookie：
通常 cookie 的域和浏览器地址的域匹配，这被称为第一方 cookie。那么第三方 cookie 就是 cookie 的域和地址栏中的域不匹配，这种 cookie 通常被用来第三方广告网站。为了跟踪用户的浏览记录，并且根据收集的用户的浏览习惯，给用户推送相关的广告。

session 和 cookie 区别
区别：

session 保存在服务器，cookie 保存在客户端；
session 中保存的是对象，cookie 中保存的是字符串；
session 不能区分路径，同一个用户访问一个网站期间，所有的 session 在任何一个地方都可以访问；
cookie 如果设置路径，则在某些地方不能访问
session 需要借助 cookie 才能正常工作，如果禁用 cookie ， session 会失效；
客户端会在发送请求的时候，自动将本地存活的 cookie 封装在信息头发送给服务器。

session 和 cookie 应用场景

session 上下文机制，针对每一个用户，通过 sessionid 来区分不同客户；
session 是以 cookie 或 url 重写为基础的，默认使用 cookie 实现，系统会创造一个名为 jsessionid的输出 cookie；
重要状态用 session，不重要用 cookie，登录信息用 session，购物车用 cookie。

localStorage(本地存储)

HTML 5 新方法，仅 IE8及以上浏览器兼容。
特点：

生命周期：持久化的本地存储，除非手动删除数据，否则数据永远不会过期。
存储的信息在同一域中是共享的。
当本页面操作了（增删改）localStorage 时，本页面不会触发 storage 事件，但是别的页面会触发 storage 事件。
大小：一般时 5M。
在非 IE 下的浏览器中可以本地打开，IE 浏览器要在服务器中打开。
localStorage 本质上对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
同样会受到同源策略的限制。

sessionStorage

和localStorage 差不多，也是本地存储，但它是会话级别的。
特点：
用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束后会随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在。关闭页面后，sessionStorage会立即销毁，或者在新窗口打开同源的另一个页面，sessionStorage中的数据也是没有的。

cookie、localStorage、sessionStorage的区别

相同：都是在本地存储数据（浏览器）；
不同：
1. localStorage 只要在相同的协议、相同的主机名，相同的端口下，就能读取/修改到同一份 localStorage 数据；
2. sessionStorage 比 localStorage 更严苛一些，除了协议、主机名、端口号外，还要求在同一窗口，也就是浏览器的标签页下；
3. localStorage 是永久存储，除非手动删除；
4. sessionStorage 当会话结束即当前页面关闭时，自动销毁；
5. cookie 的数据会在每一次发送 http 请求的时候，同时发送给服务器，而 localStorage 和 sessionStorage 不会。