Vue基础(33)_web Storage(web存储)

web Storage(web存储)

Web Storage 是HTML5规范提供的客户端数据存储机制，属于计算机学科中的浏览器存储技术，外文名为web storage。其由 sessionStorage 和 localStorage 两部分组成，前者仅在浏览器会话期间保留数据，后者支持永久存储直至手动删除。

Window.localStorage(本地存储)

官方定义：只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。

localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留 ；而当页面会话结束------也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

未登录账号的情况下进行了某网站的商品搜索，搜索之后关闭浏览器，再次打开该网站，搜索历史中保存了之前的搜索记录。图示：

原理：借助浏览器的本地存储(localStorage) 将数据存到硬盘上，用于缓存数据。

如何查看浏览器本地存储？

每个网站都有自己的浏览器本地存储，谷歌浏览器可以通过鼠标右键检查 -Console(控制台) -移到箭头选more Tabs -Application(应用) -Storage(存储) -**Local storage(本地存储)**查看，不同浏览器查看的位置可能稍有不同，数据是以键值对的形式存储的。

window.localStorage的特点：

1、浏览器关闭数据也不会消失。

2、清空浏览器缓存数据会消失。

Window.sessionStorage(会话存储)

官方定义 ：sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

简而言之：会话完毕就表示浏览器关闭了。API完全同localStorage。浏览器只要关闭，数据就没了。

总结：

1、存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。

2、浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3、相关API：

1、xxxStorage.setItem('key', 'value');

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2、xxxStorage.getItem('key');

该方法接受一个键名作为参数，返回键名对应的值。

3、xxxStorage.removeItem('key');

该方法接受一个键名作为参数，并把该键名从存储中删除。

4、xxxStorage.clear()

该方法会清空存储中的所有数据。

补充：xxx 代表 local/session。

备注：

1、SessionStorage存储的内容会随着浏览器窗口关闭而消失。

2、LocalStorage存储的内容，需要手动清除 【包括：调用了removeItem、clear等API或者清空浏览器缓存】才会消失。

3、xxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null 。

4、JSON.parse(null)的结果依然是null。

示例：以下代码中，localStorage也可以全部替换为sessionStorage实现会话存储。按键：ctrl + f。

html 复制代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
    <style>
        button {
            margin: 5px 0px;
        }
    </style>
</head>

<body>
    <h2>localStorage本地存储</h2>
    <button onclick="saveData()">点我保存一组数据</button><br>
    <button onclick="readData()">点我读取一组数据</button><br>
    <button onclick="deleteData()">点我删除某些数据</button><br>
    <button onclick="deleteAllData()">点我清空所有数据</button>
    <script>
        let p = { name: '王五', age: '18' }
        function saveData() {
            // window可省略。
            window.localStorage.setItem('msg', '张三');
            // 数字666和对象p等都不是string类型，默认自动调了toString()方法，转变成了字符型。
            localStorage.setItem('msg2', 666);
            localStorage.setItem('msg3', p);
            // JSON.stringify()：将一个 JavaScript 对象或值转换为 JSON 字符串。方便解析。
            localStorage.setItem('msg4', JSON.stringify(p));
        }
        function readData() {
            console.log(localStorage.getItem('msg'));
            console.log(localStorage.getItem('msg2'));
            const result = localStorage.getItem('msg4');
            // 解析 JSON 字符串。
            console.log(JSON.parse(result))
        }
        function deleteData() {
            localStorage.removeItem('msg');
            localStorage.removeItem('msg3')
        }
        function deleteAllData() {
            localStorage.clear()
        }
    </script>
</body>

</html>