Vue----webStorage浏览器本地存储、localStorage、sessionStorage

快来打我* 2024-04-05 05:24 38阅读 0赞

**目录**

总结

一、localStorage保存数据

二、sessionStorage

--------------------

## 总结 ##

1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

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

**3.相关API:**  
① xxxxxStorage.setItem('key', 'value');  
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对 应的值。

② xxxxxStorage.getItem('person');  
该方法接受一个键名作为参数，返回键名对应的值。

③xxxxxStorage.removeItem('key');  
该方法接受一个键名作为参数，并把该键名从存储中删除。  
④ xxxxxStorage.clear()  
该方法会清空存储中的所有数据。

**4.备注:**  
①SessionStorage存储的内容会随着浏览器窗口关闭而消失。

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

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

④JSON.parse(null)的结果依然是null CSDN @我爱布朗

## 一、localStorage保存数据 ##

**最大特点：将浏览器关闭，这些数据也不会消失**

![5a1e252bed3c4da28ba59b73de14cc70.png][]

<!DOCTYPE html>
    
     <html>
        <head>
            <meta charset="UTF-8"/>
            <title>localStorage</title>
        </head>
    
        <body>
            <h2>localStorage</h2>
            <button onclick="saveData()">点我保存数据</button>
            <button onclick="readData()">点我读取数据</button>
            <button onclick="deleteData()">点我删除数据</button>
            <button onclick="deleteAllData()">点我清空数据</button>
    
    
    
            <script type="text/javascript">
                let p = {name:'张三',age:18}
    
                function saveData(){
                    // setItem键值对的方式，而且是字符串，
                    window.localStorage.setItem('msg','hello!')
    
                    // 对象千万别让他调用tostring，调完之后不认识了
                    // JSON.stringify 把一个对象变成字符串的模样，并且能体现出来里面的内容
                    window.localStorage.setItem('person',JSON.stringify(p))
                }
                function readData(){
                    console.log(localStorage.getItem('msg'))
                    console.log(localStorage.getItem('person'))
    
                    const result= localStorage.getItem('person')
    
                    // JSON.parse将数据转化成js对象形式
                    console.log(JSON.parse(result))
                }
                function deleteData(){
                    localStorage.removeItem('msg')
                }
    
                function deleteAllData(){
                    localStorage.clear()
                }
            </script>
        </body>
    
    
     </html>

保存数据：![9b52686817b9463e9f75f18af1b05d18.png][]

读取数据：![4cad70c3fb674c448ad328681431de57.png][]

删除数据：

![2cc1804283c1480d9e6d463b04ea0bfa.png][]

清空数据：

![7861a8f4e53441bd85d487f1299cb2fe.png][]

## 二、sessionStorage ##

**最大特点：浏览器关闭后，数据就会消失**

<!DOCTYPE html>
    
     <html>
        <head>
            <meta charset="UTF-8"/>
            <title>sessionStorage</title>
        </head>
    
        <body>
            <h2>sessionStorage</h2>
            <button onclick="saveData()">点我保存数据</button>
            <button onclick="readData()">点我读取数据</button>
            <button onclick="deleteData()">点我删除数据</button>
            <button onclick="deleteAllData()">点我清空数据</button>
    
    
    
            <script type="text/javascript">
                let p = {name:'张三',age:18}
    
                function saveData(){
                    // setItem键值对的方式，而且是字符串，
                    window.sessionStorage.setItem('msg','hello!')
    
                    // 对象千万别让他调用tostring，调完之后不认识了
                    // JSON.stringify 把一个对象变成字符串的模样，并且能体现出来里面的内容
                    window.sessionStorage.setItem('person',JSON.stringify(p))
                }
                function readData(){
                    console.log(sessionStorage.getItem('msg'))
                    console.log(sessionStorage.getItem('person'))
    
                    const result= sessionStorage.getItem('person')
    
                    // JSON.parse将数据转化成js对象形式
                    console.log(JSON.parse(result))
                }
                function deleteData(){
                    sessionStorage.removeItem('msg')
                }
    
                function deleteAllData(){
                    sessionStorage.clear()
                }
            </script>
        </body>
    
    
     </html>

[5a1e252bed3c4da28ba59b73de14cc70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/ec1f9fb67d58478cbf9fd80c81a4199c.png
[9b52686817b9463e9f75f18af1b05d18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/74cbbf63dd74408a907920136fe62936.png
[4cad70c3fb674c448ad328681431de57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/5f2b5d786c2a42a19da196c5bccfcd14.png
[2cc1804283c1480d9e6d463b04ea0bfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/8e34051d3cd14a529c04d70f3ff67f4b.png
[7861a8f4e53441bd85d487f1299cb2fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/dd474b5f94994e0a8f402a038a3e483a.png