本地存储
localStorage
1.存储在浏览器物理空间中
2.除非手动删除，理论上可以永久存在
3.可以跨页面使用，但是要保证是同一个浏览器
4.可以存储5MB左右
存储数据
// 设置 -- 新增
// localStorage.setItem(键，字符串值)
localStorage.setItem('mykey_73', '我要放假啦')
注：本地存储只能存字符串
获取数据
// 获取 -- 查询
// localStorage.getItem(键) 返回这个键所对应的字符串值
let v = localStorage.getItem('mykey_73')
console.log(v);
注：如果键不存在，就返回null
删除数据
// 删除本地存储：删除指定名称的键和值，如果键不存在，也不会报错
// localStorage.removeItem(键)
localStorage.removeItem('mykey_73')
// 删除浏览器中所有的本地存储，需谨慎使用
// localStorage.clear(键)
localStorage.clear('mykey_73')
案例*本地存储使用
本地存储只能存储字符串格式的数据，如果你存储的不是字符串，它默认就会调用存储数据的toString()方法,将数据转换为字符串，所调用出来的数据不是我们想要的，无法使用；所以我们需要将复杂数据类型转换成JSON字符串，在存储到本地
<body>
<button>设置本地存储</button>
<button>获取本地存储</button>
<button>删除本地存储</button>
<button>干掉所有本地存储</button>
<script>
let list = [{ name: 'jack', age: 20 }, { name: 'rose', age: 18 }]
let btn1 = document.querySelector('button:nth-of-type(1)')
let btn2 = document.querySelector('button:nth-of-type(2)')
let btn3 = document.querySelector('button:nth-of-type(3)')
let btn4 = document.querySelector('button:nth-of-type(4)')
btn1.addEventListener('click', function () {
// 将数据对象转换为json格式字符串
localStorage.setItem('mykey_73', JSON.stringify(list))
})
btn2.addEventListener('clic k', function () {
// 将json格式字符串重新转换为js对象
// JSON.parse(json格式字符串)：将字符串转换为js对象
let v = JSON.parse(localStorage.getItem('mykey_73'))
console.log(v, typeof v);
})
</script>
</body>
sessionStorage
1.api和localStorage一样
2.它是存储在浏览器的缓存空间中
3.只是关闭当前会话，就会消失
3.不同会话不能混用，那个会话存储就只能这个会话使用
