浏览器缓存学习笔记

浏览器存储

示例：网页的搜索历史

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

保存数据

    点击保存数据
    
     

1
2
3
4
5
6
7
8
9
10
11
12
13

保存数据运行截图

读取数据

点击读取数据

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

            const result = localStorage.getItem('person')
            console.log(JSON.parse(result))
        }
       
1
2
3
4
5
6
7
8
9

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

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


运行结果截图

删除数据

    点击删除数据
        function deleteData() {
            localStorage.removeItem(msg0)
        }

1
2
3
4
5

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

清空数据

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

 点击清空数据
    function deleteAllData() {
        localStorage.clear()
    }
1
2
3
4

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