cookie、localStorage、sessionStorage三种客户端存储方式

ꪤ、匿名

已于 2023-02-03 15:15:08 修改

阅读量2.3k

点赞数 2

文章标签： http html5 html

于 2021-09-14 15:03:01 首次发布

本文链接：https://blog.csdn.net/jjjh968/article/details/120287307

版权

cookie

cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。
域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。

`sessionStorage（会话存储）`

同源策略：不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页：两个相同域下的标签页不能互通。

在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionStorage，如果刷新当前标签页依然可以访问 sessionStorage。

使用sessionStorage保存的数据只是当前页面会保留，即页面会话级别，当关闭浏览器或者关闭页签后sessionStorage保存的数据会被清空，而且在同个浏览器即使相同源，其他页面不可以共享sessionStorage保存的数据。

使用场景：

主要针对会话级的小数据的存储。
存储一些在当前页面刷新仍然需要存储，但是关闭后不需要留下的信息。
很适合单页应用的使用，可以用来存储登录态信息等。

localStorage（本地存储）

同源策略：和 sessionStorage 一样，要访问同一个 localStorage 页面必须来自同一个域名，同种协议，同种端口。

localStorage 设定后，刷新或者重新打开标签页，关闭浏览器重新打开原来的标签页也可以访问到。

使用的场景：

持久性的保存客户端数据，只能通过 JavaScript 删除或者用户清除浏览器缓存。
如果有一些稍大量的数据，例如编辑器的自动保存等。
多页面间访问共同数据。 sessionStorage 只能用于一个标签页，而localStorage可以在多个标签页之间共享。

LocalStorage 与 SessionStorage出现原因：

克服 Cookie 的一些限制，同时存储一些需要严格控制在客户端，不需要发送给服务器的一些数据。
提供了除 Cookie 之外的另一种存储会话的途径。
提供了一种大容量存储空间来跨回话存储数据的途径。

cookies,sessionStorage和localStrorage的区别

cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

三者的区别和特点

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4K。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage：数据在当前浏览器窗口关闭后自动删除
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭