JS本地存储
本地存储
@jarringslee
本地存储：将数据存储在本地浏览器中
常见的使用场景：
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
优点：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右
localStorage本地存储分类
作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失
特性： 以键值对的形式存储，并且存储的是字符串， 省略了window
语法：
键值对中，键：已声明的变量不用加引号；值：纯数字类型不用加引号，但是存储后会被改为字符串类型
-
存储数据
localStorage.setItem('键', '值')localStorage.setItem() -
获取数据
localStorage.getItem('键', '值') -
删除数据（只删除名字）
localStorage.removeItem('键') -
存储数据
localStorage.setItem('键', '值')
sessionStorage
特性：
-
用法跟localStorage基本相同，同一窗口（页面下可共享），以键值对的方式存储并使用
-
区别是：生命周期是关闭浏览器窗口。当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除
-
存储：
sessionStorage.setItem(key,value) -
获取：
sessionStorage.getItem(key) -
删除：
sessionStorage.removeItem(key)
存储复杂数据类型
问题： 本地只能存储字符串,无法存储复杂数据类型.
解决： 需要将复杂数据类型转换成 JSON字符串,在存储到本地
语法： JSON.stringify(复杂数据类型) JSON.parse(复杂数据类型)
JSON字符串：
- 首先是1个字符串
- 属性名使用双引号引起来，不能单引号
- 属性值如果是字符串型也必须双引号
<body><script>// 本地存储复杂数据类型const goods = {name: '小米',price: 1999}// localStorage.setItem('goods', goods)// console.log(localStorage.getItem('goods'))// 1. 把对象转换为JSON字符串 JSON.stringifylocalStorage.setItem('goods', JSON.stringify(goods))//作为值的goods不用加引号// console.log(typeof localStorage.getItem('goods'))// 2. 把JSON字符串转换为对象 JSON.parseconsole.log(JSON.parse(localStorage.getItem('goods')))//或者写为const str = localStorage.getItem('goos')console.log(JSON.parse(goods))</script>
</body>