关于javascript:Web-Storage

cookie 为浏览器提供了存储数据的计划，但该计划有如下毛病：

1. 存储空间无限，只有 4KB；随着网页存储浏览器的数据量减少，这点存储空间顾此失彼。
2. 浏览器发动申请时，都会携带符合要求的 cookie 数据；与接口无关的数据存储在 cookie 中，会减少每次申请的载荷。
3. cookie 初衷为存储用户的身份标识，存储其余数据，则与设置初衷背离。

为了解决 cookie 在浏览器存储数据方面的缺点，HTML5 带来了 Web Storage 计划。

Web Storage 计划定义了两个存储对象：localStorage 和 sessionStorage。localStorage 是永恒存储机制，sessionStorage 是跨会话的存储机制。

Storage 类型

localStorage 和 sessionStorage 对象都是 Storage 构造函数的实例，都具备雷同的操作属性和办法。这些办法都是同步办法，即存储工作执行结束之后才继续执行之后的代码。

setItem

存储键 / 值对；如果键存在，则笼罩值。

class Storage {setItem(key: string, value: string): void
}

getItem

依照键返回对应值；如果键对应的值存在，则返回对应的值，否则返回null。

class Storage {getItem(key: string): string | null
}

removeItem

删除键以及对应的值。

class Storage {removeItem(key: string): void
}

clear

删除所有的数据。

class Storage {clear(): void
}

key

获取该索引下的键名；获取不到键名时，返回null。

class Storage {key(index: number): string | null
}

length

获取存储键值对的数量。

class Storage {length: number}

sessionStorage

sessionStorage 对象存储的数据，只存在于以后标签页，其余雷同 URL 的标签页无奈共享 sessionStorage 数据。

以后标签页刷新时，sessionStorage 数据依然保留，但敞开以后标签页之后 sessionStorage 数据将会删除。

tips: 同一个标签页下合乎同源要求的 iframe 页面之间的 sessionStorage 数据是能够共享的。试试看

localStorage

• 合乎同源要求的所有页面都能够共享 localStorage 数据。
• 数据不会过期，浏览器重启之后数据依然存在。

storage 事件

window.addEventListener ('storage', event => {})

当 localStorage 或sessionStorage中的数据更新后，storage事件就会触发，它具备以下属性：

• key —— 产生更改的数据的 key（如果调用的是 .clear() 办法，则为 null）。
• oldValue —— 旧值（如果是新增数据，则为 null）。
• newValue —— 新值（如果是删除数据，则为 null）。
• url —— 产生数据更新的文档的 url。
• storageArea —— 产生数据更新的 localStorage 或 sessionStorage 对象。

tips: 该事件会在所有能够拜访存储对象的 window 对象上触发（导致以后存储数据扭转的 window 对象除外）。

同源定义

如果两个 URL 的协定、域名、端口都雷同，则这两个 URL 是同源。

下表给出了与 URL http://store.company.com/dir/… 的源进行比照的示例:

总结

Web 存储对象 localStorage 和sessionStorage容许咱们在浏览器中保留键 / 值对。

• key和 value 都必须为字符串。
• 存储大小限度为 5MB+，具体取决于浏览器。
• 它们不会过期。
• 数据绑定到源（域 / 端口 / 协定）。