浏览器存储(webStorage)常用API以及简单使用

末蓝、 2023-09-23 17:30 40阅读 0赞

## 浏览器存储(webStorage) ##

存储内容不是Vue团队打造的，原本的js中就有，所以可以不使用脚手架编译，可以写在HTML中编写

webStorage又分为localStorage和sessionStorage，浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

存储内容大小一般支持5MB左右（不同浏览器可能还不一样），它的键值对都是字符串

下面通过一个常见的应用案例来解释说明

## 浏览器本地存储应用 ##

浏览器本地存储应用就是在本地浏览器中缓存些东西到硬盘中  
下面以唯品会为例子演示，搜索框输入皮鞋，回车搜索

![在这里插入图片描述][48959b9336394921aabc292e91b92d5a.png]

关闭页面，再次打开网页，发现皮鞋存在了搜索历史中

这里我是没有登录的，所以不可能是存入到数据库，浏览器本地存储是存储到硬盘的

![在这里插入图片描述][03e101d33ad140a1aba4b33998104de0.png]  
通过控制的Application的LocalStorage中可以看到

![在这里插入图片描述][f74739122aaa46ed807dc087ba41fc19.png]  
可以看到是以键值对的形式存储的

如果我们新增一个，可以看到搜索历史中又多了一个

![在这里插入图片描述][4eff9576d83d4500ae472dfe7985cb8a.png]  
点击❌则会清空  
![在这里插入图片描述][84e6f88aeb8b4ea2a4cf9889e60b27c5.png]  
这就是浏览器本地存储应用，我们也是可以通过代码实现类似的功能，下面进行演示

## localStorage(本地存储) ##

localStorage的最大特点就是就算把浏览器关闭掉也不会消息。如果想把清除它，可以清除缓存

可以通过JS控制ocalStorage的crud,编写几个按钮，分别对localStorage里面的数据进行crud

### 新增字符串 ###

使用 window.localStorage.setItem(‘xxx’,‘xxx’)方法即可新增，是键值对的形式，window可写可不写

注意：键和值必须都是字符串，如果不是字符串，会默认调用toString()方法

![在这里插入图片描述][91fb4b7ede29470fbca89175c0934547.png]

![在这里插入图片描述][fc80db78d46d43ad8c8bbcbd6a44f948.png]

### 新增对象 ###

如果新增的不是一个字符串，而是一个对象呢，如果直接新增的话，肯定会被toString

![在这里插入图片描述][2f2e6289745b4aa3abf4901db4a5957a.png]  
![在这里插入图片描述][a7c85829d1aa4a7eb07b97cb6c05895d.png]  
所以要使用JSON.stringify格式化处理下

![在这里插入图片描述][5f5f05c8e21a46e88c853d3487594938.png]  
![在这里插入图片描述][69c26b13981a487b8a15d5b3a8fdd4a9.png]  
这样新增的时候就可以新增一个字符串和一个对象了  
![在这里插入图片描述][aa78e68dba564a809d6e5c8f4e2b9a59.png]  
![在这里插入图片描述][3df5e5563aa742feaa03e45642ead752.png]

### 读取字符串 ###

既然设置(新增)使用的是setItem,那么读取肯定就是getItem了，根据key读取，有返回值

![在这里插入图片描述][f826744f2b5948aea6981964d39c457a.png]  
![在这里插入图片描述][58391612f81a4c388835b70d54322c6d.png]

### 读取对象 ###

上面读取对象的格式不是我们想要的，我们需要解析一下

![在这里插入图片描述][1510aa961c664dcd9e0a857f7888c297.png]

![在这里插入图片描述][30dcc3c01dd345e9b3de76672957b1a7.png]  
如果读取字符串的是key不存在，那么则显示null

如果读取对象的key不存在，那么也显示null

### 删除 ###

使用的api是removeItem,根据key删除localStorage中的数据

![在这里插入图片描述][7785ebefaa314d7f9525b09a576017d4.png]

### 清空 ###

和删除类似，删除是根据key删除单个，但是清空会删除全部的，这个api是clear  
![在这里插入图片描述][d29fe70749814af8a0f87094332801a5.png]  
![在这里插入图片描述][ae285a3caf69497084002772e645868c.png]  
代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>localStorage</title>
    </head>
    <body>
        <h2>localStorage</h2>
        <button onclick="saveData()">点我保存一个数据</button>
        <button onclick="readData()">点我读取一个数据</button>
        <button onclick="deleteData()">点我删除一个数据</button>
        <button onclick="clearData()">清空全部的数据</button>
    </body>
    <script>
        function saveData(){
        
            // 向localStorage中存储数据，是键值对的形式 键和值必须都是字符串
            let p={
        'name':'张三',age:18}
            // 新增对象
            localStorage.setItem('person',JSON.stringify(p))
            // 新增字符串
            localStorage.setItem('msg','hello')
        } 
        function readData(){
        
            // 根据key读取localStorage中的数据
            // 读取字符串
            console.log(localStorage.getItem('msg'))
            // 读取对象，先解析
            console.log(JSON.parse(localStorage.getItem('person')))
        }
        function deleteData(){
        
            //  根据key删除localStorage中的数据
            localStorage.removeItem('msg')
        }
        function clearData(){
           
            // 清空全部的数据
            localStorage.clear()   
        }
    </script>
    </html>

到了这里localStorage的应用和查看方式以及简单crud就说完了，localStorage的最大特点就是就算把浏览器关闭掉也不会消息，下面介绍sessionStorage

## sessionStorage(会话存储) ##

localStorage有一个弟弟叫sessionStorage，它的特点就是浏览器已关闭，数据就没了

localStorage的所有API都可以适用于sessionStorage

![在这里插入图片描述][e7acd813ea2448d2bd48b7ead2b6353c.png]  
既然localStorage的所有API都可以适用于sessionStorage，那么就可以复制刚才localStorage的代码进行简单修改

注意：使用sessionStorage的API要把localStorage进行替换

![在这里插入图片描述][3196b67ca4b649a687cdfe85469a12a8.png]  
功能都是一样的，就不贴图了，而且关闭浏览器重新打开后，数据会消失

## 总结 ##

相关API：
        1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
        2.xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。
        3. xxxxxStorage.removeItem('key');该方法接受一个键名作为参数，并把该键名从存储中删除。
        4.  xxxxxStorage.clear()该方法会清空存储中的所有数据。
    4. 备注：
        1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
        2. LocalStorage存储的内容，需要手动清除才会消失。
        3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
        4. JSON.parse(null)的结果依然是null。

[48959b9336394921aabc292e91b92d5a.png]: https://img-blog.csdnimg.cn/48959b9336394921aabc292e91b92d5a.png
[03e101d33ad140a1aba4b33998104de0.png]: https://img-blog.csdnimg.cn/03e101d33ad140a1aba4b33998104de0.png
[f74739122aaa46ed807dc087ba41fc19.png]: https://img-blog.csdnimg.cn/f74739122aaa46ed807dc087ba41fc19.png
[4eff9576d83d4500ae472dfe7985cb8a.png]: https://img-blog.csdnimg.cn/4eff9576d83d4500ae472dfe7985cb8a.png
[84e6f88aeb8b4ea2a4cf9889e60b27c5.png]: https://img-blog.csdnimg.cn/84e6f88aeb8b4ea2a4cf9889e60b27c5.png
[91fb4b7ede29470fbca89175c0934547.png]: https://img-blog.csdnimg.cn/91fb4b7ede29470fbca89175c0934547.png
[fc80db78d46d43ad8c8bbcbd6a44f948.png]: https://img-blog.csdnimg.cn/fc80db78d46d43ad8c8bbcbd6a44f948.png
[2f2e6289745b4aa3abf4901db4a5957a.png]: https://img-blog.csdnimg.cn/2f2e6289745b4aa3abf4901db4a5957a.png
[a7c85829d1aa4a7eb07b97cb6c05895d.png]: https://img-blog.csdnimg.cn/a7c85829d1aa4a7eb07b97cb6c05895d.png
[5f5f05c8e21a46e88c853d3487594938.png]: https://img-blog.csdnimg.cn/5f5f05c8e21a46e88c853d3487594938.png
[69c26b13981a487b8a15d5b3a8fdd4a9.png]: https://img-blog.csdnimg.cn/69c26b13981a487b8a15d5b3a8fdd4a9.png
[aa78e68dba564a809d6e5c8f4e2b9a59.png]: https://img-blog.csdnimg.cn/aa78e68dba564a809d6e5c8f4e2b9a59.png
[3df5e5563aa742feaa03e45642ead752.png]: https://img-blog.csdnimg.cn/3df5e5563aa742feaa03e45642ead752.png
[f826744f2b5948aea6981964d39c457a.png]: https://img-blog.csdnimg.cn/f826744f2b5948aea6981964d39c457a.png
[58391612f81a4c388835b70d54322c6d.png]: https://img-blog.csdnimg.cn/58391612f81a4c388835b70d54322c6d.png
[1510aa961c664dcd9e0a857f7888c297.png]: https://img-blog.csdnimg.cn/1510aa961c664dcd9e0a857f7888c297.png
[30dcc3c01dd345e9b3de76672957b1a7.png]: https://img-blog.csdnimg.cn/30dcc3c01dd345e9b3de76672957b1a7.png
[7785ebefaa314d7f9525b09a576017d4.png]: https://img-blog.csdnimg.cn/7785ebefaa314d7f9525b09a576017d4.png
[d29fe70749814af8a0f87094332801a5.png]: https://img-blog.csdnimg.cn/d29fe70749814af8a0f87094332801a5.png
[ae285a3caf69497084002772e645868c.png]: https://img-blog.csdnimg.cn/ae285a3caf69497084002772e645868c.png
[e7acd813ea2448d2bd48b7ead2b6353c.png]: https://img-blog.csdnimg.cn/e7acd813ea2448d2bd48b7ead2b6353c.png
[3196b67ca4b649a687cdfe85469a12a8.png]: https://img-blog.csdnimg.cn/3196b67ca4b649a687cdfe85469a12a8.png