聊一聊常见的浏览器数据存储方案( 二 ) _数据存储

通常，我们可以使用 window.addEventListener("storage", func) 或使用 onstorage 属性（如 window.onstorage = func）来监听 storage 事件：
window.addEventListener('storage', e => {console.log(e.key);console.log(e.oldValu);console.log(e.newValue);});window.onstorage = e => {console.log(e.key);console.log(e.oldValu);console.log(e.newValue);});注意，该功能不会在发生更改的同一浏览器选项卡上触发，而是由同一域的其他打开的选项卡或窗口触发。此功能用于同步同一域的所有浏览器选项卡/窗口上的数据。因此，要对此进行测试，需要打开同一域的另一个选项卡。
（4）存储限制localStorage 和 sessionStorage 只能存储 5 MB 的数据，因此需要确保存储的数据不会超过此限制。
localStorage.setItem('a', Array(1024 * 1024 * 5).join('a'))localStorage.setItem('b', 'a')// Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of `a` exceeded the quota.在上面的例子中，收到了一个错误，首先创建了一个5MB的大字符串，当再添加其他数据时就报错了。
另外，localStorage 和 sessionStorage 只接受字符串。可以通过 JSON.stringify 和 JSON.parse 来解决这个问题：
const user = {name : "zhangsan",age : 28,gender : "male",profession : "lawyer" };localStorage.setItem("user", JSON.stringify(user));localStorage.getItem("user");// '{"name":"zhangsan","age":28,"gender":"male","profession":"lawyer"}'JSON.parse(localStorage.getItem("user"))// {name: 'zhangsan', age: 28, gender: 'male', profession: 'lawyer'}如果我们直接将一个对象存储在 localStorage 中，那将会在存储之前进行隐式类型转换，将对象转换为字符串，再进行存储：
const user = {name : "zhangsan",age : 28,gender : "male",profession : "lawyer" };localStorage.setItem("user", user);localStorage.getItem("user");// '[object Object]'Web Storage 使用了同源策略，也就是说，存储的数据只能在同一来源上可用。如果域和子域相同，则可以从不同的选项卡访问 localStorage 数据，而无法访问 sessionStorage 数据，即使它是完全相同的页面。
另外：

无法在 web worker 或 service worker 中访问 Web Storage；
如果浏览器设置为隐私模式，将无法读取到 Web Storage；
Web Storage 很容易被 XSS 攻击，敏感信息不应存储在本地存储中；
它是同步的，这意味着所有操作都是一次一个。对于复杂应用，它会减慢应用的运行时间。

（5）示例下面来看一个使用 localStorage 的简单示例，使用 localStorage 来存储用户偏好：

<input type="checkbox" id="darkTheme" name="darkTheme" onclick='onChange(this);'><label for="darkTheme">黑暗模式</label><br>

html {background: white;}.dark {background: black;color: white;}

function toggle(on) {if (on) {document.documentElement.classList.add('dark');} else {document.documentElement.classList.remove('dark');}}function save(on) {localStorage.setItem('darkTheme', on.toString());}function load() {return localStorage.getItem('darkTheme') === 'true';}function onChange(checkbox) {const value = https://www.isolves.com/it/cxkf/bk/2022-11-09/checkbox.checked;toggle(value);save(value);}const initialValue = load();toggle(initialValue);document.querySelector('#darkTheme').checked = initialValue;

这里的代码很简单，页面上有一个单选框，选中按钮时将页面切换为黑暗模式，并将这个配置存储在 localStorage 中。当下一次再初始页面时，获取 localStorage 中的主题设置。
3. Cookie（1）Cookie 概述Cookie 主要用于身份验证和用户数据持久性。Cookie 与请求一起发送到服务器，并在响应时发送到客户端；因此，cookies 数据在每次请求时都会与服务器交换。服务器可以使用 cookie 数据向用户发送个性化内容。严格来说，cookie 并不是客户端存储方式，因为服务器和浏览器都可以修改数据。它是唯一可以在一段时间后自动使数据过期的方式。
每个 HTTP 请求和响应都会发送 cookie 数据。存储过多的数据会使 HTTP 请求更加冗长，从而使应用比预期更慢：