webStorage【浏览器本地存储】
localStorage和sessionStorage统称为webStorage
1. localStorage
未登录账号的情况下进行了商品搜索，搜索历史中保存了之前的搜索记录
借助浏览器的本地存储可以将数据存到硬盘上，用于缓存数据
通过浏览器如何查看浏览器本地存储
每个网站都有自己的浏览器本地存储，可以通过浏览器开发者工具-应用-存储-本地存储空间查看，不同浏览器查看的位置可能稍有不同，数据是以键值对的形式存储的
window.localStorage
浏览器关闭数据也不会消失
清空浏览器缓存数据会消失
<body>
<button onclick="saveData()" type="button">点我保存数据</button>
<button onclick="getData()" type="button">点我读取数据</button>
<button onclick="deleteData()" type="button">点我删除数据</button>
<button onclick="truncateData()" type="button">点我清空数据</button>
<script type="text/javascript">
let p = {name:'张三', age:123}
function saveData(){
// key和value都得是字符串，如果试图存储值为其他类型的数据，最终存入浏览器本地存储的也是字符串
// 当value的类型不是字符串时，存储时会调用value的toString()方法并将结果作为value进行存储
// 如果多次存储相同key的数据，后面的操作会覆盖之前存储的数据
// 浏览器本地存储的本地视图会试图对字符串进行解析，虽然存入的都是字符串，像JSON字符串这种可以解析为对象的就会以对象形式展示
localStorage.setItem('msg', JSON.stringify(p))
localStorage.setItem('msg2','aaa')
}
function getData(){
// 读取JSON字符串可以解析为对象，当msg不存在时，JSON.parse(localStorage.getItem('msg'))的结果也是null
console.log(JSON.parse(localStorage.getItem('msg')))
// 当读取的key不存在时，返回null
console.log(localStorage.getItem('xxx'))
}
function deleteData(){
localStorage.removeItem('msg2')
}
function truncateData(){
localStorage.clear()
}
</script>
</body>
2. sessionStorage
对于浏览器来说，会话完毕了就表示浏览器关闭了
API完全同localStorage，浏览器只要关闭，数据就没了
3. 总结
-
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
-
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
-
相关API：
-
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 -
xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。
-
xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。
-
xxxxxStorage.clear() 该方法会清空存储中的所有数据。
-
-
备注：
- SessionStorage存储的内容会随着浏览器窗口关闭而消失。
- LocalStorage存储的内容，需要手动清除【调用了removeItem、clearAPI或者清空了浏览器缓存】才会消失。
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。JSON.parse(null)的结果依然是null。
4. Todo-list中使用webStorage
<!--App组件-->
data(){
return {
// todoList从webStorage中获取，获取不到默认为[]，由于存的是字符串，所以需要通过JSON.parse()解析成对象
todoList: JSON.parse(localStorage.getItem('todoList')) || []
}
},
//通过watch实现对todoList属性的监视，只要todoList发生改变，修改自动同步到webStorage中
watch:{
todoList:{
//开启深度监视，保证修改勾选状态时也能够正常同步到webStorage中
deep: true,
handler(newValue){
//JSON.stringify()：将对象转为JSON字符串存入webStorage
localStorage.setItem('todoList',JSON.stringify(newValue))
}
}
},