每日一学vue2：浏览器本地存储（webStorage）

最新推荐文章于 2024-09-12 00:33:30 发布

淼学派对

最新推荐文章于 2024-09-12 00:33:30 发布

阅读量1.2k

点赞数 5

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/lbcyllqj/article/details/127046771

版权

vue 专栏收录该内容

22 篇文章 7 订阅

订阅专栏

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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage</title>
</head>
<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    

    <script>
        function saveData(){
            localStorage.setItem('msg1','hello!')
            localStorage.setItem('msg2',666)
        }
    </script>
</body>
</html>

结果演示：

注意：

我们可以通过：

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

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

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

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

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    

    <script>
        let p = {name:'张三',age:18}
        function saveData(){
            localStorage.setItem('msg1','hello!')
            localStorage.setItem('msg2',666)
            localStorage.setItem('个人信息',p)
        }
    </script>
</body>

显示结果：

解决方法：

<body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>
    

    <script>
        let p = {name:'lqj',age:20}
        function saveData(){
            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值！

举例：

                <button onclick="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')

举例：

<button onclick="deleteData()">点我删除一个数据</button>

                function deleteData(){
                        localStorage.removeItem('个人信息')
                }

结果显示：

清空

关键api：

localStorage.clear()

举例：

                <button onclick="deleteAllData()">点我清空数据</button>

                function deleteAllData(){
                        localStorage.clear()
                }

结果显示：