1、本地存储介绍
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage约5M,localStorage约 20M 左右
- 只能存储字符串,可以将对象JSON.stringify()编码后存储
2、本地存储分类
cookie
- cookie设计初衷是用来和服务器通讯,而不是本地存储,他只是被借用到本地存储
- cookie有一些缺点:存储空间小,最大4k
- 在客户端请求服务器端和服务器响应时,cookie始终被携带在http请求中发送到服务器,即使不需要(造成流量浪费)。这也是限制cookie大小的原因。
- 客户端可以通过document.cookie操作cookie,并不安全(且只能通过这种方式,方法单一简陋)。
localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在
特性:可以多窗口(页面)共享(同一浏览器可以共享),以键值对的形式存储使用
语法:
- 存储数据:
localStorage.setItem(key, value)
- 获取数据:
localStorage.getItem(key)
- 删除数据:
localStorage.removeItem(key)
- clear()方法,可以删除所有存储的数据,慎用
// 存数据:
// localStorage.setItem('属性名','属性值')
const uname = 'sansna'
localStorage.setItem('uname',uname)
localStorage.setItem('age',22)
// 获取数据:localStorage.getItem(key)
// 取不到返回null
console.log(localStorage.getItem( 'uname' ))
console.log(localStorage.getItem( 'age' ))
// 删除数据:localStorage.removeItem(key)
localStorage.removeItem( 'uname' )
localStorage.removeItem( 'age' )
sessionStorage
- 生命周期:为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage 基本相同
3、存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型
解决:需要将复杂数据类型转换成JSON字符串,在存储到本地
语法:JSON.stringify(复杂数据类型)
因为本地存储里面取出来的是字符串,不是对象,无法直接使用
解决:把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)
const obj = {
stuId : 1,
uname : '小明',
age : 23,
gender : 'man',
city : "北京"
}
//存储数据
localStorage.setItem('user',JSON.stringify(obj))
//取数据
console.log(JSON.parse(localStorage.getItem('user')))