复习本地存储

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。。

本地存储

为什么要本地存储？

• 真实项目中经常需要在一个网站的多个页面间共享数据，如果登录状态，购物车信息等

但是浏览器打开页面时首先形成一个顶层的作用域 window，每次页面打开都会形成一个单独的作用域，页面之间是不可以互通访问变量的；但是项目中经常会用到页面间传递数据的要求；

每个页面又都是在浏览器中打开的，如果可以把值存储到浏览器中，让浏览器作为一个中介， A页面把值存到浏览器中，B页面从从浏览器中把A存储的值取出来；

本地存储解决方案：

• cookie
• localStorage
• sessionStorage

localStorage 和 sessionStorage

HTML5提供了本地存储方式：

• localStorage 永久存储（如果手动触发删除或者用户清除）
• sessionStorage 会话存储

localStorage

window.localStorage 对象
console.log(window.localStorage);

• localStorage.setItem(key, value) 存储数据

• localStorage 存储数据时键值的形式存储的；

• key 键

• value 值

• key 和 value 都需要是字符串类型，如果不是字符串类型，浏览器会隐式调用 toString 将其转换为字符串

localStorage.setItem({name: 1}, {name: 2});
localStorage.setItem(1, 2)

• 如果批量存储数据太麻烦，直接存储 JSON 字符串

let ary = {
	code: 0,
	data: {
		page: 1,
		limit: 10,
		list: [
			{
				course: 18,
				subject: 15,
				fire: 3,
				price: 180
			},
			{
				course: 18,
				subject: 15,
				fire: 3,
				price: 180
			},
			{
				course: 18,
				subject: 15,
				fire: 3,
				price: 180
			},
			{
				course: 18,
				subject: 15,
				fire: 3,
				price: 180
			}
		]
	},
	msg: 'ok'
};

localStorage.setItem('someJson', JSON.stringify(ary));

• localStorage.getItem(key) 获取 ls 中存储的数据

获取回来的都是字符串类型的
let json = localStorage.getItem('someJson');
let uk = localStorage.getItem('uk'); // null
console.log(uk); // 获取不存在的 key 返回 null
console.log(json);
console.log(typeof json); // string

localStorage.removeItem(key) // 删除
localStorage.removeItem('user');

• sessionStorage 会话存储
• setItem(key, value)
• getItem(key)
• removeItem(key)
• sessionStorage.setItem('ok', '0');
• localStorage 和 sessionStorage 的区别：

localStorage 是永久存储，如果不删除或者用户不清除就会一直有。而 sessionStorage 只是会话存储，只要页面不关闭有，如果页面关闭了，就消失了