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

文章目录

【Vue】第十一部分浏览器本地存储
11. 浏览器本地存储
总结

11. 浏览器本地存储

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

11.1 Window.sessionStorage和Window.localStorage的区别

Window.sessionStorage存储的内容会随着页面的关闭而消失
Window.localStorage存储的内容需要依靠手动去删除

11.2 需要注意

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

11.3 相关方法

localStorage.setItem(key,val) 存储数据
localStorage.getItem(key) 读取数据
localStorage.removeItem(key) 删除数据
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>