cookie, localStorage, sessionStorage的区别和使用

最新推荐文章于 2025-01-13 15:33:25 发布

原创最新推荐文章于 2025-01-13 15:33:25 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cookie #session

前端同时被 2 个专栏收录

45 篇文章

订阅专栏

10 篇文章

订阅专栏

博客介绍了cookie、localStorage和sessionStorage的特点。cookie存储在本地，常用于判断用户登录状态，数据会在浏览器和服务器间传递；localStorage在客户端保存，无时间限制；sessionStorage在窗口关闭时数据清除。还对比了三者在储存大小、有效时间和与服务器交互方式上的区别。

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否已经登录过该网站。

localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在。

sessionStorage：当用户的浏览器窗口关闭时，数据会被清除。

创建和访问localStorage：

//1 设置数据
let forgetData = {phone:vm.phone};
localStorage.setItem("forgetData", JSON.Stringfy(forgetData));
//forgetData是存储在localStorage里边的本地数据； JSON.Stringfy(forgetData) 是将数据转化为字符串格式。

//获取数据
vm.forgetData = JSON.parse(localStorage.getItem("forgetData")); //将字符串转化为JSON格式

//2 设置
   localStorage.name = "zhao";
   //获取
   localStorage.name; //zhao

共同点：都是保存在浏览器端，且同源的。

区别：

1.储存大小

cookie数据大小不能超过4k, sessionStorage和localStorage虽然也有大小限制，但是要比coookie大的多，可以达到5M或者更大。

2.有效时间

localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即便窗口或浏览器关闭

3.数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端，即cookie在浏览器和服务器之间来回传递;

sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存.