41浏览器本地存储

浏览器本地存储

webStorage

1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
⒉.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
3.相关APl:

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

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

​ 3. xxxxxStorage.removeItem('key');该方法接受一个键名作为参数，并把该键名从存储中删除。

​ 4. xxxxxStorage.clear();该方法会清空存储中的所有数据。

4.备注:

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. `xxxxxStorage.getItem(xxx) `如果xxx对应的value获取不到，那么getltem的返回值是null。
4. `JSON.parse(null)`的结果依然是null。

localStorage

localStorage称之为浏览器本地存储，会将我们在网页中的各种数据保存在浏览器中，当下次再次访问此网页时，就可被二次读取。

<h3>localStorage</h3>
<button onclick="addLocalStoageItem()">点我添加存储数据</button>
<button onclick="readLocalStoageItem()">点我读取存储数据</button>
<button onclick="removeLocalStoageItem()">点我删除单条存储数据</button>
<button onclick="clearLocalStoageItem()">点我清除存储数据</button>
<script>
    // localStorage在window中，所以可以直接调用
    function addLocalStoageItem() {
        localStorage.setItem('msg1', JSON.stringify(1000));  // 数值被强转字符串（调用.toString）
        localStorage.setItem('msg2', JSON.stringify('before'));
        let arr = ['before', 'after']
        localStorage.setItem('msg3', JSON.stringify(arr));  // 数组被强转字符串（调用.toString）
        let obj = { 'name': 'localStoage', 'age': 19 };
        localStorage.setItem('msg4', JSON.stringify(obj));  // 对象被强转字符串（调用.toString），但保留对象的原始数据

        
        console.log("addLocalStoageItem:", window.localStorage)
        // PS： 将数据存储在浏览器需要使用JSON.stringify(data) 序列化：将对象（obj）转化为可存储形式（str）
    }
    function readLocalStoageItem() {
        let result1 = localStorage.getItem('msg1')
        let result2 = localStorage.getItem('msg2')
        let result3 = localStorage.getItem('msg3')
        let result4 = localStorage.getItem('msg4')
        console.log("readLocalStoageItem: msg1:", result1)
        console.log("readLocalStoageItem: msg1:", JSON.parse(result1))
        console.log("readLocalStoageItem: msg2:", result2)
        console.log("readLocalStoageItem: msg2:", JSON.parse(result2))
        console.log("readLocalStoageItem: msg3:", result3)
        console.log("readLocalStoageItem: msg3:", JSON.parse(result3))
        console.log("readLocalStoageItem: msg4:", result4)
        console.log("readLocalStoageItem: msg4:", JSON.parse(result4))  // 反序列化一个null的结果还是null
    }

    // PS： 将数据读取在浏览器需要使用JSON.parse(data) 反序列化：将存储数据（str）转化为可读取形式 对象（obj）

    function removeLocalStoageItem() {
        localStorage.removeItem('msg1')     // 没有读到的数据返回的结果是null，
    }
    function clearLocalStoageItem() {
        localStorage.clear()
    }
</script>

sessionStorage

sessionStorage称之为会话级缓存，每一次的浏览都是重新获取，当关闭浏览器时，此次会话结束。

    <h3>sessionStorage</h3>
    <button onclick="addsessionStoageItem()">点我添加存储数据</button>
    <button onclick="readsessionStoageItem()">点我读取存储数据</button>
    <button onclick="removesessionStoageItem()">点我删除单条存储数据</button>
    <button onclick="clearsessionStoageItem()">点我清除存储数据</button>
    <script>
        function addsessionStoageItem() {
            sessionStorage.setItem('msg1', JSON.stringify(1000));  // 数值被强转字符串（调用.toString）
            sessionStorage.setItem('msg2', JSON.stringify('before'));
            let arr = ['before', 'after']
            sessionStorage.setItem('msg3', JSON.stringify(arr));  // 数组被强转字符串（调用.toString）
            let obj = { 'name': 'sessionStoage', 'age': 19 };
            sessionStorage.setItem('msg4', JSON.stringify(obj));  // 对象被强转字符串（调用.toString），但保留对象的原始数据

            
            console.log("addsessionStoageItem:", window.sessionStorage)
            // PS： 将数据存储在浏览器需要使用JSON.stringify(data) 序列化：将对象（obj）转化为可存储形式（str）
        }
        function readsessionStoageItem() {
            let result1 = sessionStorage.getItem('msg1')
            let result2 = sessionStorage.getItem('msg2')
            let result3 = sessionStorage.getItem('msg3')
            let result4 = sessionStorage.getItem('msg4')
            console.log("readsessionStoageItem: msg1:", result1)
            console.log("readsessionStoageItem: msg1:", JSON.parse(result1))
            console.log("readsessionStoageItem: msg2:", result2)
            console.log("readsessionStoageItem: msg2:", JSON.parse(result2))
            console.log("readsessionStoageItem: msg3:", result3)
            console.log("readsessionStoageItem: msg3:", JSON.parse(result3))
            console.log("readsessionStoageItem: msg4:", result4)
            console.log("readsessionStoageItem: msg4:", JSON.parse(result4))  // 反序列化一个null的结果还是null
        }
        // PS： 将数据读取在浏览器需要使用JSON.parse(data) 反序列化：将存储数据（str）转化为可读取形式 对象（obj）

        function removesessionStoageItem() {
            sessionStorage.removeItem('msg1')     // 没有读到的数据返回的结果是null，
        }
        function clearsessionStoageItem() {
            sessionStorage.clear()

        }
    </script>

ps：localStorage 与sessionStorage 被包含于 webStorage。