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里面的内容都是字符串形式（如果用户输入的不是字符串类型，它会自动给你转成字符串类型）
存储
举例：
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>localStorage</title></head><body><h2>localStorage</h2><buttononclick="saveData()">点我保存一个数据</button><script>functionsaveData(){ localStorage.setItem('msg1','hello!') localStorage.setItem('msg2',666) } </script></body></html>
结果演示：
我们可以通过：
localStorage.setItem('xxx','yyy')，以键值对的形式存在！
xxx:写入的是密钥的数据（key）
yyy:写入的是值的数据（Value）
如果我们用字符串的形式直接项存到本地储存的话，会出现如下情况：
<body><h2>localStorage</h2><buttononclick="saveData()">点我保存一个数据</button><script>letp= {name:'张三',age:18} functionsaveData(){ localStorage.setItem('msg1','hello!') localStorage.setItem('msg2',666) localStorage.setItem('个人信息',p) } </script></body>
显示结果：
解决方法：
<body><h2>localStorage</h2><buttononclick="saveData()">点我保存一个数据</button><script>letp= {name:'lqj',age:20} functionsaveData(){ 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值！
举例：
<buttononclick="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')
举例：
<buttononclick="deleteData()">点我删除一个数据</button> function deleteData(){ localStorage.removeItem('个人信息') }
清空
关键api：
localStorage.clear()
举例：
<buttononclick="deleteAllData()">点我清空数据</button> function deleteAllData(){ localStorage.clear() }
结果显示：
注意：如果我们不小心写了一个没有给值的key
读取时会报：null
当读取一个没有给值的对象数据时，报出null，然后我们再用JSON.parse（）来解析它时，还会报null，并不是undefined(也就是说并不会报空指针异常)
![[浏览器系列] ： 客户端本地存储](https://ucc.alicdn.com/t5yonqgaoewro_20240327_66ef92a3d822489dad54c379093ab6b3.gif?x-oss-process=image/resize,h_160,m_lfit)