526互联

cookie、sessionStorage 和 localStorage

发布时间 2023-04-24 10:14:21作者: 伍十

cookie、sessionStorage 和 localStorage

1.基本概念

Cookie是保存在计算机上的一种文件。当我们使用计算机浏览网页时，服务器会生成一个证书并将其返回给我们的计算机。这个证书就是cookie。一般来说，cookie是服务器写给客户端的文件，也可以称为浏览器缓存。

简单来说，它可以读取并保存你访问网站时产生的一些行为信息，这些信息通常是加密的，否则会侵犯用户的隐私。Cookie也可以帮助加快第二次访问。通常，当我们访问一些网页时，系统会提示我们是否要保存用户名和密码。下次登录时，我们可以自动登录，无需再次登录。
image
图片来源于百度

2.用法
//引入js-cookie.js
1.直接引用cdn：<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
2.本地下载下来后：<script src="/plugins/js.cookie.js"></script>
3.模块化开发时: npm install js-cookie  import Cookies from 'js-cookie'

//使用
// 写入cookie
Cookies.set('name', 'value');
// 读取cookie
Cookies.get('name'); //'value'
// 读取所有可见的cookie
Cookies.get();//{name: 'value'}
// 删除某项cookie值
Cookies.remove('name');

//cookie的set方法支持的属性有：
//expires->过期时间
//path->设置为指定页面创建cookie
//domain->设置对指定域名及指定域名的子域名可见
//secure->设置是否只支持https,默认是false
Cookies.set('key', 'value');  //创建简单的cookie
Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
Cookies.set('key', 'value', { expires: 17, path: '/userInfo'  }); //为userInfo页创建有效期17天的cookie
//删除指定页面path的cookie
Cookies.remove('key', { path: '' });

//注：如果存的是对象,如:
const userInfo = {age : 111, score : 90};
Cookies.set('userInfo', userInfo);
//取出来的userInfo需要进行JSON的解析,解析为对象
const userInfo = JSON.parse( Cookies.get('userInfo') );
//也可以使用
Cookies.getJSON('userInfo');
3.生命周期与优缺点
//创建Cookie时指定的expires值，就是Cookie的生存周期，在这个周期内Cookie有效，超出周期Cookie就会被清除。
//注：Cookie的生存周期设置为 '0'或负值, 在关闭浏览器时，就会马上清除Cookie。

优点

  • Cookie易于使用和实现

    实现cookie的使用要比任何其他Internet协议容易得多。

  • 占用更少的内存

    不需要任何服务器资源，并存储在用户的计算机上，因此不会给服务器带来额外的负担。

  • 持久性

    当在客户端的浏览器上设置Cookie时，它可以持续数天，数月甚至数年。这样可以轻松保存用户首选项和访问信息，并在用户每次返回站点时保持此信息可用。此外，由于Cookie存储在客户端的硬盘上，因此如果服务器崩溃，它们仍然可用。

缺点

  • 不安全

    cookie是以明文形式存储，可能会造成安全风险，因为任何人都可以打开并篡改cookie。

  • 数量受到限制

    浏览器能创建的 Cookie 数量最多为 300​ 个，并且每个不能超过 4KB​，每个 Web 站点能设置的 Cookie 总数不能超过 20 个。

  • 可以被禁用

    用户可以选择从浏览器设置中禁用其计算机上的cookie。这意味着用户可以决定不在他的浏览器上使用cookie，这可能会使程序在浏览器的运行中产生一些问题。

SessionStorage和localStorage
1.基本概念

浏览器提供的本地存储机制

2.用法
//它们的 API 基本相同,包括:
// setItem(key, value): 存储数据
// getItem(key): 获取数据
// removeItem(key): 删除数据
// clear(): 清空所有存储的数据
// key(i): 获取第 i 个键名
// length: 获取存储的数据个数

// 存储数据
sessionStorage.setItem("key1", "value1");
localStorage.setItem("key2", "value2");
// 获取数据
const value1 = sessionStorage.getItem("key1");
const value2 = localStorage.getItem("key2");
// 删除数据
sessionStorage.removeItem("key1");
localStorage.removeItem("key2");
// 清空存储
sessionStorage.clear(); 
localStorage.clear();
3.生命周期与优缺点
  • sessionStorage 只在当前浏览器标签页有效,关闭标签页即失效。localStorage 永久有效,除非主动删除。

localStorage 优点:

  • 数据持久存储。除非主动删除,否则一直存在。
  • 可以保存结构化数据,如对象、数组。

localStorage 缺点:

  • 不能存储敏感数据,因为数据可以被恶意获取。
  • 可能导致本地存储空间被占用过多。

sessionStorage 优点:

  • 数据临时存储,会话结束自动删除,不会占用过多本地存储空间。
  • 可以在同一个会话的不同页面中共享数据。

sessionStorage 缺点:

  • 数据不持久,会话结束随之删除。
  • 不能保存敏感数据,数据只在客户端,容易被获取。
三者异同
特性 Cookie localStorage sessionStorage
数据的生命周期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB
与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信
存储类型 只能存储字符串 可以存储字符串、布尔值、整数、浮点数、对象、数组等
作用域 在同源的窗口/标签页之间共享
典型使用场景 保存用户登录状态、购物车信息等 长期保存键值对数据,比如用户偏好设置或浏览历史 保存一个会话的信息,在用户登出或浏览器关闭之前一直存在

‍