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

2022-11-20 13:10:22 浏览数 (1)

webStorage分为：localStorage、sessionStorage

   特点：

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

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

相关api：

xxxStorage.setItem('key','value'):该方法接收一个键和参数，会把键值对添加到存储中，如果键名存在，更新起对应内容

xxxStorage.getItem('person')：该方法接收一个键名作为参数，返回键名对应的值

xxxStorage.removeItem('key')：该方法接收一个键名作为参数，并把键名从存储中删除

xxxStorage.clear()：该方法会清空存储中所有的数据

解释：

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里面的内容都是字符串形式（如果用户输入的不是字符串类型，它会自动给你转成字符串类型）

存储

举例：

代码语言：javascript复制
<!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）

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

代码语言：javascript复制
<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>

显示结果：

 解决方法：

代码语言：javascript复制
<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值！

举例：

代码语言：javascript复制
                <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')

举例：

代码语言：javascript复制
<button onclick="deleteData()">点我删除一个数据</button>

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

结果显示：

 清空

关键api：

localStorage.clear()

举例：

代码语言：javascript复制
                <button onclick="deleteAllData()">点我清空数据</button>

                function deleteAllData(){
                        localStorage.clear()
                }

结果显示：

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

读取时会报：null

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

sessionStorage

        特点：

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

 只要路飞还在笑，我的生活无烦恼。

明天见！！！

存储 文件存储 编程算法 api json

0 人点赞