浏览器存储
示例：网页的搜索历史
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。
-
存储内容大小一般支持5MB左右（不同浏览器可能不同）
-
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
-
备注：
(1). SessionStorage存储的内容会随着浏览器窗口关闭而消失，而LocalStorge存储的内容手动清除才会消失。
(2). xxxxStorage.getItem(xxx),若xxx对应的value获取不到，那么getItem的返回值是null
(3). JSON.parse(null)的结果依然是null
