localStorage、cookie、 sessionStorage

一、localStorage、cookie、 sessionStorage的使用

1. Cookie：最早的客户端存储技术，可以由服务器设置并读取。每次发起同一域名下的HTTP请求时，Cookie都会被自动包含在请求头中，这对于跨会话识别用户（如登录状态保持）非常有用。然而，Cookie的大小受限（通常为4KB），而且频繁传输会影响性能。

2. localStorage：这是一个持久的客户端存储解决方案，可以在用户关闭浏览器后保持数据。对于大数据（最大5MB）和需要长期存储的数据，如用户偏好设置，localStorage很有用。然而，localStorage仅限于同源策略。

3. sessionStorage：与localStorage类似，但其数据在浏览器标签或窗口关闭时被清除，所以适用于临时数据，如购物车信息。同样，sessionStorage也受同源策略限制。

二、localSstorage、cookie、sessionStorage的区别，如内存大小、生存周期、存储内容限制、作用域等

localStorage，sessionStorage 和 cookie 在很多方面都有不同，包括内存大小、生命周期、存储内容限制和作用域等：

localStorage:

1. 内存大小：最多可以存储5MB的数据。
2. 存储内容限制：只能存储字符串。如果要存储其他数据类型，需要先将其转换为字符串（例如，通过使用JSON.stringify()）。
3. 作用域：限制在当前域名下，不同的浏览器窗口和标签页间的数据可以共享。

sessionStorage:

1. 内存大小：最多可以存储5MB的数据。
2. 作用域：限制在当前的浏览器窗口或标签页。如果打开新的浏览器窗口或标签页，即使URL相同，数据也不会被共享。
3. 存储内容限制：只能存储字符串。如果要存储其他数据类型，需要先将其转换为字符串（例如，通过使用JSON.stringify()）。
4. 生存周期：数据在页面会话结束时被删除（即浏览器或标签页关闭时）。

三、他们各自的特性及使用场景

localStorage：

• 特性：数据长期存储，即使关闭浏览器也会保留；只能存储字符串；仅在同源策略下有效（同协议、同域名、同端口）。
• 使用场景：适用于需要长期存储在客户端的数据。比如，可以用来存储用户的主题偏好设置（暗模式或亮模式）、购物网站的购物车信息等。

sessionStorage：

• 特性：数据在当前会话（即当前窗口或标签页）中存储，关闭浏览器或标签页数据就会被清除；只能存储字符串；仅在同源策略下有效。
• 使用场景：适用于一些不需要长期存储，只在当前会话中有效的数据。比如，如果一个网站的问卷调查希望用户在一次会话中完成，可以使用sessionStorage来存储用户的回答。

cookie：

• 特性：数据可以在浏览器关闭后保留，但需要设置过期时间；只能存储少量的数据（最大4KB）；不仅可以在同源策略下有效，还可以设置跨域名访问。
• 使用场景：由于可以设置过期时间和对服务器可见，cookie主要用于保存一些服务器需要读取的数据，例如会话（登录）状态，用户的首选语言，识别用户的信息等。

需要注意的是，这些都不应被用来存储敏感信息，因为它们都可以被用户或其他网站轻松访问和修改。对于需要存储敏感信息的情况，应该考虑使用更安全的方法，比如服务器端存储，并通过安全的HTTPS连接传输。

借鉴
 

cookie

推荐使用js-cookie对cookie进行操作：（GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies）

安装命令：npm install js-cookie --save / yarn add js-cookie

js-cookie插件基本使用

import Cookies from "js-cookie";

Cookies.set('cookieName', 'value') // 写入cookie

Cookies.get('cookieName') // 读取cookie

Cookies.get() // 读取所有可见的cookie

Cookies.remove('cookieName') // 删除某项cookie值
/**
	* 存cookie  
 	* set的常用属性有 ：  
 	* 1、expires ->  过期时间（一个date对象，默认单位（天））    
  * 2、path    ->  设置为指定path页面及子页面创建cookie （默认为/，即所有页面）
  * 3、domain  ->  设置对指定域名及指定域名的子域名可见（默认为请求地址，即url前缀）
  * 4、secure  ->  值有false和true , 表示设置是否只支持https, 默认是false
  */

Cookies.set('key', 'value', { expires: 27 }); // 创建有效期为27天的cookie

const seconds = 10;
const expires = new Date(new Date() * 1 + seconds * 1000);
Cookies.set('username', 'tanggaowei', { expires: expires }); // cookie 10秒后失效

cookie保存对象

// 注意：如果存的是对象，如： 
const userInfo = { name: "李明", age: 20 };  
Cookie.set('userInfo', userInfo) 

// 取出来的userInfo需要进行JSON的解析,解析为对象，以下两种方式均可
Cookie.getJSON('userInfo'); // 推荐
JSON.parse( Cookie.get('userInfo') ); 

path属性示例

// path使用示例：假如现在有目录/home 然后有两个子页面 /home/user 、/home/test
// /home下面所有子页面都可以访问该cookie
Cookies.set('key', 'value', { expires: 7, path: '/home/' });

// 只有user子页面可以访问该cookie
Cookies.set('key', 'value', { expires: 7, path: '/home/user' });

Cookies.remove('cookieName', { path: '' }); // 删除指定path页面的cookie

localStorage

推荐使用vue-ls对localStorage进行管理操作：GitHub - RobinCK/vue-ls: :boom: Vue plugin for work with local storage, session storage and memory storage from Vue context 🇺🇦

安装命令：npm install vue-ls --save / yarn add vue-ls

全局引入（main.js中）：

import Storage from 'vue-ls';

Vue.use(Storage);

使用方式：Vue.ls （全局）， this.$ls（上下文）

vue-ls插件基本使用

// 1、通过get方法获取localStorage，可以设置一个默认值def（默认def === null）
// 即该name的localStorage未设置则返回def，否则返回name
Vue.ls.get(name, def)

Vue.ls.get("name", "李明") // 获取localStorage的name，若未设置name，则返回默认值"李明"

// 2、通过set方法设置localStorage，并可以设置可选参数expire，有效时间（毫秒）
Vue.ls.set(name, value, expire)

Vue.ls.set("name", "李明", 60 * 60 * 1000) // 有效时间 1 小时（单位为毫秒）

// 3、通过remove方法移除指定name的localStorage
Vue.ls.remove(name)

// 4、清空所有localStorage
Vue.ls.clear()

// 5、监听localStorage的变更
Vue.ls.on(name, callback)

// callback函数包括三个参数（newValue，oldValue，url）
// 更改后新值，更改前的旧值，修改该值选项卡的url

// 6、移除监听
Vue.ls.off(name, callback)

sessionStorage

sessionStorage基本使用

// 通过setItem方法设置
window.sessionStorage.setItem(name, value)

// 通过getItem方法获取
window.sessionStorage.getItem('名称')

// 移除指定name的sessionStorage
window.sessionStorage.removeItem(name)

// 清空所有sessionStorage
window.sessionStorage.clear()