vue2：浏览器本地存储（webStorage）

2022-10-08 247

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue2：浏览器本地存储（webStorage）

webStorage分为

localStorage、sessionStorage

特点：

1.存储容量一般支持5MB左右（不同浏览器也有所不同）

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

解释：

sessionStorage存储的内容会随着浏览器窗口关闭而消失

localStorage存储的内容，需要手动清除才会消失

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

JSON.parse（null）的结果依旧是null

localStorage

特点：

1.如果用户住店点击某个api接口如（deleteData、deleteAllData）会改变数据

2.当用户清空浏览器的缓存时，数据也会随之消失

浏览器本地存储（演示）

1.首先我们要在某个浏览器中输入东西后，关闭它，在重更新打开

2.开启开发者工具中的Application（应用）选项，在Local Storage里面有两个选项

（有一个或两个或多个网站：搜索的历史记录就在显示你电脑地址的网页里面）

3.里面有两个属性列表（我们拿唯品会来说：Key和Value）

注意：Key和Value里面的内容都是字符串形式（如果用户输入的不是字符串类型，它会自动给你转成字符串类型）

存储

举例：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>localStorage</title></head><body><h2>localStorage</h2><buttononclick="saveData()">点我保存一个数据</button><script>functionsaveData(){
localStorage.setItem('msg1','hello!')
localStorage.setItem('msg2',666)
        }
</script></body></html>

结果演示：

我们可以通过：

localStorage.setItem('xxx','yyy')，以键值对的形式存在！

xxx:写入的是密钥的数据（key）

yyy:写入的是值的数据（Value）

如果我们用字符串的形式直接项存到本地储存的话，会出现如下情况：

<body><h2>localStorage</h2><buttononclick="saveData()">点我保存一个数据</button><script>letp= {name:'张三',age:18}
functionsaveData(){
localStorage.setItem('msg1','hello!')
localStorage.setItem('msg2',666)
localStorage.setItem('个人信息',p)
        }
</script></body>

显示结果：

解决方法：

<body><h2>localStorage</h2><buttononclick="saveData()">点我保存一个数据</button><script>letp= {name:'lqj',age:20}
functionsaveData(){
localStorage.setItem('msg1','hello!')
localStorage.setItem('msg2',666)
localStorage.setItem('个人信息',JSON.stringify(p))
        }
</script></body>

显示结果：

读取

注意：直接读取以对象存入的形式，就会直接出现一个字符串转换为字符串的形式（例如{"name":"lqj","age":"20"}）

若我们要以对象的形式让其输出显示：

解决办法：JSON.parse（xxx）前提是xxx为{"name":"lqj","age":"20"}的key值！

举例：

<buttononclick="raedData()">点我读取一个数据</button>                function raedData(){
                console.log(localStorage.getItem('msg1'))
                console.log(localStorage.getItem('msg2'))
                const result = localStorage.getItem('个人信息')
                console.log(JSON.parse(result))
                }

结果显示：

删除

关键api：

localStorage.removeItem('xxx')

举例：

<buttononclick="deleteData()">点我删除一个数据</button>                function deleteData(){
                        localStorage.removeItem('个人信息')
                }

清空

关键api：

localStorage.clear()

举例：

<buttononclick="deleteAllData()">点我清空数据</button>                function deleteAllData(){
                        localStorage.clear()
                }

结果显示：

注意：如果我们不小心写了一个没有给值的key

读取时会报：null

当读取一个没有给值的对象数据时，报出null，然后我们再用JSON.parse（）来解析它时，还会报null，并不是undefined(也就是说并不会报空指针异常)

sessionStorage

特点：

特点当我们关闭浏览器时自动删除数据