描述 cookie localStorage sessionStorage 区别

cookie

• 本身用于浏览器和 sever 通讯
• 被“借用”到本地存储来
• 可用 document.cookie='...' 来修改

document.cookie = 'a=100';
console.log(document.cookie); // a=100
document.cookie = 'b=200';
console.log(document.cookie); // a=100; b=200
document.cookie = 'a=300';
console.log(document.cookie); // b=200; a=300

• 缺点：存储大小，最大 4KB
• http 请求时需要发送到服务器，增加请求数据量，在 Request Headers 会带上 Cookie: b=200; a=300
• 只能用 document.cookie='...' 来修改，太过简陋

localStorage 和 sessionStorage

• HTML5 专门为存储而设计，最大可存 5M
• API 简单易用 setItem getItem

localStorage.setItem('a', '100');
console.log(localStorage.getItem('a')); // 100
sessionStorage.setItem('b', '200');
console.log(sessionStorage.getItem('b')); // 200

• 不会随着 http 请求被发送出去
• localStorage 数据会永久存储，除非代码或手动删除
• sessionStorage 数据只会存于当前会话，浏览器关闭则清空
• 一般用 localStorage会更多一些

cookie localStorage sessionStorage 区别

• 最大容量，cookie：4KB，localStorage 和 sessionStorage：5M
• API 易用性：cookie：只有 document.cookie 操作，localStorage 和 sessionStorage：有setItem getItem 等API
• cookie 会随着 http 请求被发送出去，localStorage 和 sessionStorage 不会