Web存储

概述

Web Storage 包含如下两种机制：

sessionStorage 该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
- 仅为会话存储数据，这意味着数据将一直存储到浏览器（或选项卡）关闭。
- 数据永远不会被传输到服务器。
- 存储限额大于 Cookie（最大5MB）。
localStorage 即使浏览器关闭并重新打开也仍然存在。
- 存储的数据没有过期日期，只能通过 JavaScript、清除浏览器缓存或本地存储的数据来清除。

localStorage

持久性：localStorage 存储的数据是持久的，即使浏览器关闭或计算机重启，数据仍然存在。
作用域：存储的数据在同源（协议、域名和端口相同）的所有页面和标签页中都是共享的。
容量：通常，每个源（origin）的存储限制为5MB（但可能因浏览器而异）。

// 存储数据
localStorage.setItem('uname', 'ycq')

// 获取数据
localStorage.getItem('uname')
console.log(value); // 输出: value

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

// 清除所有存储的数据
localStorage.clear();

alt text {: height=75%, width=75%}
{: height=75%, width=75%}

注意：在本地存储对象和数组需要进行序列化和反序列化。

const obj = {
    id: 10001,
    name: 'xvhao',
    age: 9
}
localStorage.setItem('xvhao', JSON.stringify(obj))
console.log(localStorage.getItem('xvhao'))
console.log(JSON.parse(localStorage.getItem('xvhao')))

alt text {: height=75%, width=75%}
{: height=75%, width=75%}

sessionStorage

会话性：sessionStorage 存储的数据仅在当前会话（页面会话）中有效。一旦页面会话结束（例如，当用户关闭浏览器标签页或窗口时），数据就会被删除。
作用域：与 localStorage 类似，sessionStorage 的数据也是在同源的所有页面和标签页中共享的，但仅限于当前会话。
容量：与 localStorage 相同，每个源的存储限制通常为5MB。

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
let value = sessionStorage.getItem('key');
console.log(value); // 输出: value

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

// 清除所有存储的数据（仅在当前会话中）
sessionStorage.clear();