前端之WebStoreage本地存储

WebStorage包含localStorage和sessionStorage

localStorage 本地存储

浏览器通过本地存储存在了硬盘上
localStorage存储的数据会残存在浏览器里, 关闭再打开浏览器后数据依然存在, sessionStorage不会残存

setItem – 设置一个值

存储方法和存字符串

//方法一、
window.localStorage.setItem('keyString', 'valueString')
//方法二、
window.localStorage.keyString = valueString
//方法三、
window.localStorage['keyString'] = valueString

注意:
window可以省略,这是浏览器自带的
key和value都是字符串, 如果存的值不是字符串, 他会自动调用toString()

存对象

虽然也是字符串类型的保存, 但是可以识别出对象类型/数组

window.localStorage.setItem('keyString',  JSON.stringify(对象或数组))

使用时需要解析

JSON.parse()

getItem – 读取

//方式一      
console.log(localStorage.getItem('keyString'))
//二      
console.log(localStorage.keyNumber)
     
// console.log(JSON.parse(localStorage.getItem('p')))

removeItem – 删除

      localStorage.removeItem('keyString')

clear – 清空

      localStorage.clear()

注意:

1. 读取一个不存在的key, 返回 null

sessionStorage 会话存储

1.所有方法都一样
2.关闭浏览器sessionStorage存储的内容会清空

总结