localStorage和sessionStorage
localStorage和sessionStorage
localStorage是指在用户浏览器中存储数据的方式，允许Web应用程序将少量的数据保存在用户设备上，便于页面之间、关闭浏览器后的数据持久化，他不会随着HTTP请求发送道服务器，减少带宽消耗，存储方式是键值对进行存储
localstorage:
存储数据：
使用 localStorage.setItem(key, value) 方法将数据存储到 localStorage 中：
// 存储一个用户名
localStorage.setItem('username', 'Alice');
读取数据：
使用 localStorage.getItem(key) 方法可以获取存储在 localStorage 中的数据：
// 读取存储的用户名
const username = localStorage.getItem('username');
console.log(username); // 输出：Alice
删除数据：
可以通过 localStorage.removeItem(key) 方法来删除指定的存储数据：
// 删除存储的用户名
localStorage.removeItem('username');
清空所有数据
如果需要清除 localStorage 中的所有数据，可以使用 localStorage.clear() 方法：
// 清空所有 localStorage 数据
localStorage.clear();
更新数据
localStorage 中的值是可以覆盖更新的，只需要再次调用 setItem 方法即可：
// 更新用户名为 Bob
localStorage.setItem('username', 'Bob');
存储对象和数组
localStorage 只能存储字符串，如果需要存储对象或数组，可以将它们序列化为 JSON 格式：
// 存储一个对象
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));// 读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出：Alice
localstorage
sessionstorage:
sessionStorage 的 API 与 localStorage 基本相同，唯一的区别在于其数据存储的生命周期。
- 存储数据
// 存储一个 session 数据
sessionStorage.setItem('sessionData', 'This is session data');
- 读取数据
// 读取 session 数据
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // 输出：This is session data
- 删除数据
// 删除指定 session 数据
sessionStorage.removeItem('sessionData');
- 清空所有 session 数据
// 清空所有 session 数据
sessionStorage.clear();
两者不同
localstorage和sessionstorage两者都是Web服务端，他们区别是在存储数据的生命周期上：
相同点：
localstorage和sessionstorage两者都是Web服务端API的一部分，用于浏览器中存储数据，存储的数据都是字符串
都受同源策略限制，只能在相同的协议、域名和端口下访问数据
不同点：
localstorage在同源的所有标签页和窗口中共享，session进项与当前标签页，即使是同源的其他标签也无法访问。
localstorage数据发生变动时，可以在其他窗口检测到，但是sessionstorage不可以监听到，
localstorage：数据持久化程度高，用户关闭浏览器后，数据依旧会被保留，除非手动删除，数据一直可以存在，适用于长期保存
sessionstorage:数据仅在浏览器会话期间有效，关闭页面或者标签页，数据会被删除，适用于存储临时性数据，表单状态之间传递数据