网络存储API介绍
网络存储是一个在网络应用程序的客户端存储用户特定内容的过程。内容将以键和值的形式存储。这是作为HTML5 API规范的一部分引入的。在此之前，内容将使用cookies存储在客户端。Cookies有一些缺点。
你也可以查看我之前关于Angular的本地和会话存储的文章
Cookies的缺点
- 所有的浏览器都不支持cookie，客户端可以配置为禁用cookie，在这种情况下，没有办法在客户端存储内容
- 限制存储在cookie中的数据量（4kb）。
- 每个请求都要传递cookie数据，所以每个请求都有重复的cookie数据，性能就不好了。
与每个域的cookie相比，网络存储有更多的数据存储量。这在客户端存储应用程序的本地数据，而不影响服务器性能。
作为HTML5的一部分，引入了两种存储方法。
本地存储存储在本地存储的数据没有过期机制。数据永远不会过期。即使浏览器关闭，数据也不会丢失。
会话存储（SessionStorage） 存储在会话存储（SessionStorage）中的数据有一个范围，当浏览器关闭时，会话数据将丢失，数据将被自动删除。
如何检查任何浏览器是否支持网络存储？
网络存储API继承了Window对象的两个属性Window.sessionStorage和Window.localStorage，这两个属性将提供对SessionStorage和LocalStorage的访问。这段代码需要在旧的浏览器中进行检查。如果没有支持，我们就必须使用cookie作为替代机制。
if(Window.sessionStorage){
// Supports Session Storage
}else { // support not aivalble
}
网络存储提供了不同的APIs方法和属性。不同的方法/访问器方法对两种存储类型都是一样的 属性 length - 返回存储在网络存储方法中的数据项的数量
方法：
描述
getItem()：
传递键名并返回键的值
setItem()：
保存键和值，如果键已经存在，更新现有键的值
removeItem()：
传递键，从存储器中删除键和值
clear()：
该方法删除整个缓存数据并清空它
keys()：
传递数字，并返回该数字在存储器中的位置的键。
设置数据到网络存储器 setItem(key, value)方法用于将数据存储到存储器中。下面是一个将数据设置到localStorage的例子
const Emps = [
{
"id": "001",
"name": "John",
},
{
"id": "002",
"name": "Francis",
},
{
"id": "003",
"name": "Ram",
}
]
localStorage.setItem('empdata', JSON.stringify(Emps))
const empdata = JSON.parse(localStorage.getItem('empdata'))
console.log('Emps: ', empdata)
要测试数据存储，请访问DevTools + Application tab + storage section
使用getItem('key')从网络存储中检索数据
从网络存储缓存中删除特定的键
要从网络存储中删除特定的数据，使用removeItem('key')
要从存储中删除整个数据
要从网络存储中删除所有数据，使用clear()
在Chrome浏览器中查看/测试存储数据：-
以下是步骤，你可以看到上面的截图，同样
1.打开开发者工具
2.选择应用程序标签
3.进入存储选项卡，你会看到其中的LocalStorage和SessionStorage。
在Firefox中查看/测试存储：-
在火狐浏览器中，你可以使用内置的火狐浏览器控制台或Firebug
来检查这些元素。在浏览器上点击右键或使用 "工具 "+"Web 开发者 "+"检查器 "进入 "检查元素 "选项
2.转到存储选项卡
3.你会看到不同的存储标签
修复网络存储的QUOTA_EXCEEDED_ERR？
我们曾经得到 "uncaught_error:QUOTA_EXCEED_ERROR"，有时是由于数据存储容量超过了。
为了解决这个问题，我们有两种方法
- 删除或减少存储中的项目的大小
- 始终使用try/catch块进行异常处理以捕捉运行时的错误。
try {
sessionStorage.setItem('key', 'value');
} catch (e) {
if (e == QUOTA_EXCEEDED_ERROR) {
console.log('Storage Limit is already full.');
}
}
