浏览器缓存学习笔记

浏览器存储

示例：网页的搜索历史

application->Local Storage，数据通过key-value保存

保存数据

    <button onclick="saveData()">点击保存数据</button>
    
     <script type="text/javascript">

        let p = { name: 'Jack', age: '12' }
        function saveData() {
            localStorage.setItem('msg0', '我是数据！')
            localStorage.setItem('msg1', '我是数据6')
            localStorage.setItem('msg2', p)
            localStorage.setItem('msg3', JSON.stringify(p))
        }
    </script>

保存数据运行截图

读取数据

<button onclick="readData()">点击读取数据</button>

 function readData() {
           console.log( localStorage.getItem('msg3'))

            const result = localStorage.getItem('person')
            console.log(JSON.parse(result))
        }
       

注意在Demo中需要保存数据后再读取数据，不然没有数据读取空气

JSON.parse() 方法用来解析 JSON 字符串


运行结果截图

删除数据

    <button onclick="deleteData()">点击删除数据</button>
        function deleteData() {
            localStorage.removeItem(msg0)
        }

执行后就会删除保存的msg0数据

清空数据

删除所有的浏览器保存的数据

 <button onclick="deleteAllData()">点击清空数据</button>
    function deleteAllData() {
        localStorage.clear()
    }

sessionStorage

提示：Ctrl+Shift+F可以在windows中的vscode中全局搜索。
將LocalStorage全部替换为sessionStorage

总结

sessionStorage和LocalStorage统称为webStorage。

1. 存储内容大小一般支持5MB左右（不同浏览器可能不同）

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

3. 备注：
   (1). SessionStorage存储的内容会随着浏览器窗口关闭而消失，而LocalStorge存储的内容手动清除才会消失。
   (2). xxxxStorage.getItem(xxx),若xxx对应的value获取不到，那么getItem的返回值是null
   (3). JSON.parse(null)的结果依然是null