浏览器存储

浏览器存储是指浏览器提供的一种存储机制，用于在浏览器端存储数据。浏览器存储主要有以下几种：

1. localStorage：用于长期存储数据，数据不会过期，除非手动删除。
2. sessionStorage：用于临时存储数据，数据在页面会话结束时被清除。
3. cookie：用于存储少量数据，数据会被发送到服务器，需要注意数据大小和安全性。

localStorage

localStorage 是一个全局对象，可以直接使用。它提供了以下几个方法：

1. setItem(key, value)：将键值对存储到 localStorage 中。
2. getItem(key)：根据键获取存储在 localStorage 中的值。
3. removeItem(key)：根据键删除 localStorage 中的值。
4. clear()：清空 localStorage 中的所有数据。

// 存储数据
localStorage.setItem('name', 'Rarrot');

// 获取数据
let name = localStorage.getItem('name');
console.log(name); // Rarrot

// 删除数据
localStorage.removeItem('name');

// 清空数据
localStorage.clear();

特点

1. localStorage 中存储的数据不会过期，除非手动删除。
2. localStorage 中存储的数据是以域名为单位进行存储的，不同域名之间的数据不会相互影响。
3. localStorage 中存储的数据是以字符串形式存储的，如果需要存储对象或数组，需要先将其转换为字符串。
4. localStorage 的存储容量通常为 5MB，不同浏览器可能有所不同。
5. localStorage 是同步的，即存储和读取数据是阻塞的，会影响页面的性能。

sessionStorage

sessionStorage 的使用方法与 localStorage 类似，也是一个全局对象，提供了以下几个方法：

1. setItem(key, value)：将键值对存储到 sessionStorage 中。
2. getItem(key)：根据键获取存储在 sessionStorage 中的值。
3. removeItem(key)：根据键删除 sessionStorage 中的值。
4. clear()：清空 sessionStorage 中的所有数据。

// 存储数据
sessionStorage.setItem('name', 'Rarrot');

// 获取数据
let name = sessionStorage.getItem('name');
console.log(name); // Rarrot

// 删除数据
sessionStorage.removeItem('name');

// 清空数据
sessionStorage.clear();

特点

1. sessionStorage 中存储的数据在页面会话结束时被清除，即页面关闭后数据会被清除。
2. sessionStorage 中存储的数据是以字符串形式存储的，如果需要存储对象或数组，需要先将其转换为字符串。
3. sessionStorage 的存储容量通常为 5MB，不同浏览器可能有所不同。
4. 在window.open("同源页面"),<a href="http://xxx" target="_blank" rel="opener">Link</a>情况下，新开页面会复制之前页面的sessionStorage。

cookie

cookie 可以通过 document.cookie 进行读取和设置。document.cookie 的值是一个字符串，包含所有 cookie 的键值对，以分号和空格分隔。

1. 设置 cookie：可以通过 document.cookie 设置 cookie 的值。cookie 的格式为 key=value，多

个 cookie 之间用分号和空格分隔。

2. 读取 cookie：可以通过 document.cookie 读取 cookie 的值。cookie 的值是一个字符串，包含所有 cookie 的键值对，以分号和空格分隔。
3. 删除 cookie：可以通过设置 cookie 的过期时间为过去的时间来删除 cookie。

let date = new Date();
let time = date.getTime() + 1000 * 60 * 60 * 24; // 设置过期时间为 1 天
// 设置 cookie
document.cookie = 'name=Rarrot; expires=' + new Date(0).toUTCString();

特点

1. cookie 的存储容量通常为 4KB，不同浏览器可能有所不同。
2. cookie 会被发送到服务器，需要注意数据大小和安全性，安全性较差，容易被篡改，不适合存储敏感信息。
3. cookie 的存储时间可以通过设置 expires 属性来控制，如果不设置 expires 属性，cookie 默认为会话 cookie，即浏览器关闭后 cookie 会被删除。
4. cookie 的存储时间可以通过设置 max-age 属性来控制，max-age 的值为 cookie 的存储时间，单位为秒。

总结

1. localStorage：长期存储数据，容量上限5MB，同一域名下的所有标签页（tab）或窗口之间共享localStorage。
2. sessionStorage：关闭浏览器会删除数据，容量上限5MB，单个浏览器标签页（tab）或窗口之间共享数据，只有在特定场景下新开页面才会复制之前页面的sessionStorage。
3. cookie：存储少量数据，容量上限4KB，不安全。

参考链接

https://juejin.cn/post/7076767687828832286