Web Api--Web Storage本地存储_浏览器storage的方式保存 web api的相关的敏感数据-CSDN博客

本文链接：https://blog.csdn.net/qq_45264054/article/details/121716120

Web Storage 是什么？

Web Storage是HTML5中解决本地存储的方案之一。Web Storage功能就是在Web上储存数据的功能。早点时候，储存数据在cookie上，但为什么出现Web Stroage呢？

Cookie 的缺点:

数据大小：作为存储容器，cookie的大小限制在4KB左右
安全性问题：由于在HTTP请求中的cookie是明文传递的(HTTPS不是)，带来的安全性还是很大的
网络负担：cookie会被附加在每个HTTP请求中，在HttpRequest和HttpResponse的header中都是要传输的，所以在无形中增加了一些不必要的流量。

Web Storage 的优点：

存储的数据量大(5MB 左右)
不与服务器进行交互通信，可节省流量
可以存储复杂的对象类型数据(于JSON对象处理)
可以简单的当数据库操作

Web Storage的出现并不是为了取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，session正是依赖于实现客户端状态保持。Web Storage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储，使浏览器能以一种比使用cookie更直观的方式存储键/值对。

Web Storage提供两种类型的API:

sessionStorage：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据，也就是在会话期间可以使用。
localStorage：将数据保存在客户端本地的硬件设备(硬盘)中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍可继续使用。

Storage：

Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。
如果想要操作一个域名的会话存储，可以使用 Window.sessionStorage;如果想要操作一个域名的本地存储，可以使用 Window.localStorage。
sessionStorage和localStorage 具有相同的属性和方法。
属性：

Storage.length：返回存储在Storage 对象中的数据项数量

方法

Storage.key()：该方法接受一个数值n作为参数，并返回存储中的第n个键名，从0开始
Storage.setItme(key,value)：将键值对添加到存储中，如果键名存在，则更新其对应的值
Storage.getItem(key)：返回键名对应的值
Storage.removeItem(key)：将该键名从存储中删除
Storage.clear()：清空存储中所有的键名

sessionStorage 用法：

    /** Window.sessionStorage */
    // 保存数据到 sessionStorage(键值对形式)
    sessionStorage.setItem("key", "value");
    // 从 sessionStorage 读取数据
    sessionStorage("key");
    // 从 sessionStorage 删除保存的数据
    sessionStorage.removeItem("key");
    // 从sessionStorage 删除所有保存的数据
    sessionStorage.clear();

localStorage 用法：

 	/** Window.localStorage */
    // 保存数据到 localStorage(键值对形式)
    localStorage.setItem("key", 'value');
    // 从 localStorage 读取数据
    localStorage.getItem("key");
    // 从 localStorage 删除已保存的数据
    localStorage.removeItem("key");
    // 从 localStorage 删除所有已保存的数据
    localStorage.clear();