【Vue】第十一部分 浏览器本地存储

【Vue】第十一部分 浏览器本地存储

---

---

11. 浏览器本地存储

浏览器通过Window.sessionStorage和Window.localStorage来实现本地的存储

11.1 Window.sessionStorage和Window.localStorage的区别

1. Window.sessionStorage存储的内容会随着页面的关闭而消失

2. Window.localStorage存储的内容需要依靠手动去删除

11.2 需要注意

1. xxx.getItem()如果读取一个不存在的值那么就会返回null
2. JSON.pares(null) 返回的结果还是null值

11.3 相关方法

1. localStorage.setItem(key,val) 存储数据
2. localStorage.getItem(key) 读取数据
3. localStorage.removeItem(key) 删除数据
4. localStorage.clear() 清空所有数据

11.4 小案例

Window.sessionStorage和Window.localStorage的方法相同就举例Window.localStorage

  	<h2>浏览器本地存储</h2>
    <button onclick="saveDate()">点击我存一个数据</button><br>
    <button onclick="getData()">点击我读取一个数据</button><br>
    <button onclick="delData()">点击我删除指定的数据</button><br>
    <button onclick="clearData()">点击我清空所有的数据数据</button>    

    <script>
        let p = {id:'001',name:'Mark',gender:'female',age:20}
        // 存储数据
        function saveDate(){
            /*
                 localStorage.setItem(key,val)
                 如果存的是一个对象那么就需要使用JSON.stringify()将对象转成字符串的形式
                 如果没有转默认调用toString方法，那么对象就会变成【object object】
                 在读取的时候调用JSON.parse()进行解析
             */
            localStorage.setItem("name","Jack")
            localStorage.setItem("person",JSON.stringify(p))
        }
        // 读取数据
        function getData(){
            console.log(localStorage.getItem("name"));
            console.log(JSON.parse(localStorage.getItem("person")));
            //如果读取一个不存在的值那么就会返回null值
            console.log(localStorage.getItem("a"));  //null
        }
        // 删除数据
        function delData(){
            localStorage.removeItem("name")
        }
        // 清空所有数据
        function clearData() {
            localStorage.clear()
        }

    </script>

---

总结

以上就是今天要讲的内容，本文介绍了浏览器本地存储相关的一些API，希望对大家有所帮助！