每日一学vue2：浏览器本地存储（webStorage）
webStorage分为：localStorage、sessionStorage
特点：
1.存储容量一般支持5MB左右（不同浏览器也有所不同）
2.浏览器通过window.localStorage和window.sessionStorage属性来实现本地存储机制
相关api：
xxxStorage.setItem('key','value'):该方法接收一个键和参数，会把键值对添加到存储中，如果键名存在，更新起对应内容
xxxStorage.getItem('person')：该方法接收一个键名作为参数，返回键名对应的值
xxxStorage.removeItem('key')：该方法接收一个键名作为参数，并把键名从存储中删除
xxxStorage.clear()：该方法会清空存储中所有的数据
解释：
sessionStorage存储的内容会随着浏览器窗口关闭而消失
localStorage存储的内容，需要手动清除才会消失
xxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
JSON.parse（null）的结果依旧是null
localStorage
特点： 1.如果用户住店点击某个api接口如（deleteData、deleteAllData）会改变数据 2.当用户清空浏览器的缓存时，数据也会随之消失
浏览器本地存储（演示）
1.首先我们要在某个浏览器中输入东西后，关闭它，在重更新打开 2.开启开发者工具中的Application（应用）选项，在Local Storage里面有两个选项 （有一个或两个或多个网站：搜索的历史记录就在显示你电脑地址的网页里面） 3.里面有两个属性列表（我们拿唯品会来说：Key和Value） 注意：Key和Value里面的内容都是字符串形式（如果用户输入的不是字符串类型，它会自动给你转成字符串类型）
存储
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<script>
function saveData(){
localStorage.setItem('msg1','hello!')
localStorage.setItem('msg2',666)
}
</script>
</body>
</html>结果演示：
注意：
我们可以通过：
localStorage.setItem('xxx','yyy')，以键值对的形式存在！
xxx:写入的是密钥的数据（key）
yyy:写入的是值的数据（Value）
如果我们用字符串的形式直接项存到本地储存的话，会出现如下情况：
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<script>
let p = {name:'张三',age:18}
function saveData(){
localStorage.setItem('msg1','hello!')
localStorage.setItem('msg2',666)
localStorage.setItem('个人信息',p)
}
</script>
</body>显示结果：
解决方法：
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<script>
let p = {name:'lqj',age:20}
function saveData(){
localStorage.setItem('msg1','hello!')
localStorage.setItem('msg2',666)
localStorage.setItem('个人信息',JSON.stringify(p))
}
</script>
</body>显示结果：
读取
注意：直接读取以对象存入的形式，就会直接出现一个字符串转换为字符串的形式（例如{"name":"lqj","age":"20"}） 若我们要以对象的形式让其输出显示：
解决办法：JSON.parse（xxx）前提是xxx为{"name":"lqj","age":"20"}的key值！
举例：
<button onclick="raedData()">点我读取一个数据</button>
function raedData(){
console.log(localStorage.getItem('msg1'))
console.log(localStorage.getItem('msg2'))
const result = localStorage.getItem('个人信息')
console.log(JSON.parse(result))
}结果显示：
删除
关键api：
localStorage.removeItem('xxx')
举例：
<button onclick="deleteData()">点我删除一个数据</button>
function deleteData(){
localStorage.removeItem('个人信息')
}结果显示：
清空
关键api：
localStorage.clear()
举例：
<button onclick="deleteAllData()">点我清空数据</button>
function deleteAllData(){
localStorage.clear()
}结果显示：
注意：如果我们不小心写了一个没有给值的key
读取时会报：null
当读取一个没有给值的对象数据时，报出null，然后我们再用JSON.parse（）来解析它时，还会报null，并不是undefined(也就是说并不会报空指针异常)