客户端储存：cookie、localstorage、sessionstorage的区别

最新推荐文章于 2023-08-15 10:26:28 发布

Lora_0925

最新推荐文章于 2023-08-15 10:26:28 发布

阅读量203

点赞数 1

分类专栏： vue2 文章标签： javascript html5

本文链接：https://blog.csdn.net/Lora_0925/article/details/108458112

版权

vue2 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

**客户端储存：cookie、localstorage、sessionstorage的区别*

一、cookie

1.cookie是什么？
cookie是指Web浏览器存储的少量数据，服务端脚本可以读、写储存在客户端的cookie的值。

2.cookie的使用
cookie的API很早就已经定义实现了，因此兼容性很好，但是没有查询，设置，删除cookie的方法，所有的操作都要通过以特殊格式的字符串形式读写Document对象的cookie属性来完成。例如以下代码：

document.cookie = "name:lora";

3.cookie的生命周期

如果不在浏览器中设置过期的时间，cookie将会一直保存在内存中，但它只能持续在Web浏览器的会话期间，一旦用户关闭浏览器，它的生命周期就会结束。
cookie的作用域不是局限在浏览器的单个窗口中，它的有效期和整个浏览器的有效期一致，而不是单个浏览器网页。
延长cookie的有效期max-age、Expiresmax-age ：指定的是从文档被访问后的存活时间，单位为秒,相对的是文档第一次被请求时服务器记录的Request_time(请求时间)
Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而max-age相对对的是文档的请求时间(Atime)

4.cookie的存储

存储内容类型：只能存储字符串类型。
网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据。

5.cookie的局限
-cookie保存的数据不能超过4KB（即名字和总量不能超过4KB的限制）。
-cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

二、Web Storage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

1.Web Storage又分为两种：

sessionStorage（本地存储）: 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage（会话存储）:将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

2.生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。除非Web应用刻意删除储存的数据，或者用户通过设置浏览器配置（浏览器特定的UI）来删除，否则数据永远不会消失，一直保存在用户的电脑中。

-localStorage是限定在文档源级别的，文档源是通过协议、主机名以及端口三者来确定的，x下面每一个URL都有不同的文档源：

http://www.example.com  //协议：http；主机名：www.example.com
https://www.example.com  //协议（https）不同；
http://static.example.com  //主机名（static）不同：static；
http://static.example.com：8080  //端口不同；
//同源的文档共享的localStorage数据，不论该源的脚本是否正真地访问localStorage。
//它们可以互相读取对方的的数据甚至可以覆盖对方的数据。但是非同源文档间不能相互读取或者覆盖对方的数据。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源文档源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

3.储存