cookie为浏览器提供了一种存储数据的方案，但这种方案存在以下缺点：存储空间有限，只有4KB；随着网页中存储的数据量的增加，存储空间变得捉襟见肘。浏览器发起请求时，会携带符合要求的cookie数据；cookie中存储了与界面无关的数据，会增加每次请求的负载。cookie的初衷是为了存储用户的身份和存储其他数据，这偏离了设置的初衷。为了解决cookies在浏览器数据存储方面的不足，HTML5带来了WebStorage解决方案。WebStorage模式定义了两个存储对象：localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话存储机制。Storage类型的localStorage和sessionStorage对象都是Storage构造函数的实例，它们具有相同的操作属性和方法。这些方法都是同步方法，即存储任务执行完之后的代码才继续执行。setItem存储键/值对；如果键存在，则值被覆盖。classStorage{setItem(key:string,value:string):void}getItem根据key返回对应的value；如果key对应的值存在，则返回对应的值，否则返回null。类存储{getItem（键：字符串）：字符串|null}removeItem删除键和对应的值。classStorage{removeItem(key:string):void}clear删除所有数据。classStorage{clear():void}key获取索引下的键名；如果获取不到键名，则返回null。类存储{键（索引：数字）：字符串|null}length获取存储的键值对的个数。classStorage{length:number}sessionStoragesessionStorage对象存储的数据只存在于当前tab中，其他同url的tab不能共享sessionStorage数据。当前标签页刷新时，sessionStorage数据仍然保留，但当前标签页关闭后sessionStorage数据会被删除。Tips：sessionStorage数据可以在同一个tab下满足同源要求的iframe页面之间共享。试试localStorage所有满足同源要求的页面都可以共享localStorage数据。数据不会过期，浏览器重启后数据依然存在。storageeventwindow.addEventListener('storage',event=>{})当localStorage或sessionStorage中的数据更新时，会触发storage事件，它有以下属性：key-改变数据的键（如果调用是.clear()方法，或null）。oldValue-旧值（如果添加了新数据则为null）。newValue-新值（如果删除数据则为null）。url–发生数据更新的文档的url。storageArea-发生数据更新的localStorage或sessionStorage对象。提示：该事件将在所有可以访问存储对象的窗口对象上触发（导致当前存储数据发生变化的窗口对象除外）。同源定义如果两个URL的协议、域名和端口相同，则这两个URL是同源的。下表给出了与URLhttp://store.company.com/dir/...的来源比较的例子：URLResulthttp://store.company.com/dir2...同源同源只是路径不一样http://store.company.com/dir/...相同的源只是路径不同https://store.company.com/sec...失败协议不同http://store.company.com:81/d...失败端口不同（http默认端口为80）http://news.company.com/dir/o...失败域名不同SummaryWebstorageobjectslocalStorageandsessionStorage允许我们在浏览器中保存键/值对。键和值都必须是字符串。存储大小限制为5MB以上，具体取决于浏览器。它们不会过期。数据绑定到源（域/端口/协议）。
