Cookie、sessionStorage、localStorage的区别及运用
一. 共同点
都是用在浏览器端存储数据的方式，并且是同源的
二. 区别
1. cookie
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器的和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存，cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储的大小只有4K左右。
（key：可以在浏览器和服务器端来回传递，存储容量小，只有4K左右）
2. sessionStorage
sessionStorage仅在当前浏览器窗口关闭前有效，自然就不可能持久保存；localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
（key：本身就是一个会话的过程，关闭浏览器后消失，session为一个会话，当页面不用即使是同一个页面打开两次，也被视为同一次会话）
3. localStorage
localStorage在所有同源窗口中都是共享的；cookie也是在同源窗口中都是共享的。
（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
三. 特点以及运用
1. cookie
cookie是一种在浏览器和服务器之间传递的小型文本文件，它可以存储在客户端的浏览器中。cookie通常用于存储用户的身份验证信息、购物城信息等。
cookie有以下的特点：
cookie的大小限制为4KB左右cookie可以设置过期事件，可以在浏览器关闭之后仍然存在cookie可以被浏览器禁用或删除，因此不适合存储敏感信息
cookie使用示例：
//设置cookie
document.cookie = "username=John; expires=Thu 18 Dec 2022 12:00:00 UTC; path=/"
//读取cookie
let username = document.cookie;
2. sessionStorage
sessionStorage是HTML5中新增的一种存储方式，它可以在浏览器的会话期间存储数据。
sessionStorage有以下特点：
sessionStorage的大小限制为5KB左右sessionStorage只在当前会话期间有效，关闭浏览器之后数据会被清除sessionStorage只能在同一浏览器窗口或标签页中共享
sessionStorage使用示例：
//设置sessionStorage
sessionStorage.setItem('username','John');
//读取sessionStorage
let username = sessionStorage.getItem('username');
3. localStorage
localStorage也是HTML5中新增的一种存储方式，它可以在浏览器中永久存储数据。
localStorage有以下特点：
localStorage的大小显示为5KB左右localStorage可以在浏览器关闭后仍然存在localStorage只能在同一浏览器中共享
// 设置localstorage
localStorage.setItem('username', 'John');
// 读取localstorage
let username = localStorage.getItem('username');
四. 对sessionStorage和localStorage进行封装
class Storage {
//存储数据
set(key, value, type) {
const storage = type === 'session' ? sessionStorage : localStorage;
storage.setItem(key, JSON.stringify(value));
}
//通过key获取数据
get(key, type) {
const storage = type === 'session' ? sessionStorage : localStorage;
const value = storage.getItem(key);
return value ? JSON.parse(value) : null;
}
//通过key删除数据
remove(key, type) {
const storage = type === 'session' ? sessionStorage : localStorage;
storage.removeItem(key);
}
//清空所有数据
clear(type) {
const storage = type === 'session' ? sessionStorage : localStorage;
storage.clear();
}
}
使用该类可以方便地进行sessionStorage和localStorage的操作，例如：
const storage = new Storage();
// 设置sessionStorage中的值
storage.set('username', '张三', 'session');
// 获取sessionStorage中的值
const username = storage.get('username', 'session');
// 删除sessionStorage中的值
storage.remove('username', 'session');
// 清空sessionStorage中的所有值
storage.clear('session');
const storage = new Storage();
// 设置localStorage中的值
storage.set('username', '张三', 'local');
// 获取localStorage中的值
const username = storage.get('username', 'local');
// 删除localStorage中的值
storage.remove('username', 'local');
// 清空localStorage中的所有值
storage.clear('local');
