webStorage

浏览器本地存储，大小为5MB左右(会因浏览器的不同而有所差别)，通过其自身提供的API window.localStorage和window.sessionStorage实现。

localStorage与sessionStorage的区别

• localStorage 浏览器关闭也不会消失，必须手动清除（js清除事件，用户清除缓存等）
• sessionStorage浏览器关闭就会消失

两者的api相同(以下以locaStorage做示例)

存储数据setItem()

有两个参数，分别对应key-value，且类型都为字符串，如果不是字符串，此方法会自动调用toString()转换成字符串。所以要存入非字符串类型的值时要先将其序列化（JSON.stringify）。如果是相同的数据，不会再次存入。

 let dog={
    name:'fachai',
    age:2
}
function setData(){
    localStorage.setItem('apple','$45')
    localStorage.setItem('dog1',dog)
    localStorage.setItem('dog2',JSON.stringify(dog))
}

image

读取数据getItem()

一个参数，为字符串类型，key-value中的key

读取后返回的数据是经过序列化的值的时候，要用JSON.parse()解析。读取不存在数据，返回null，JSON.parse(null)结果也为null，不会出现报错。

 let apple=localStorage.getItem('apple')
 let dog2= JSON.parse(localStorage.getItem('dog2')) 
  console.log(apple)
  console.log(dog2)

删除数据

removeItem()

一个参数，为字符串类型，key-value中的key
localStorage.removeItem('apple')

clear()

没有参数，直接将数据全部清空
localStorage.clear()