JS学习|本地存储的基本使用

53 阅读1分钟

1.本地存储介绍

  • 数据存放在用户浏览器中
  • 设置、读取方便、甚至页面刷新不丢失数据
  • 容量较大,sessionStorage和localStorage约5M左右
  • 常见使用场景:页面刷新数据不丢失

2. 本地存储分类-localStorage

目标:
能够使用localStorage把数据存储到浏览器中

作用:
将数据永久存储在本地,除非手动删除,否则关闭页面也会存在

特性:
可以多窗口共享
键值对的形式存储使用

语法:
存储数据: localStorage.setItem(key,value)
获取数据: localStorage.getItem(key)
删除数据:localStorage.removeItem(key)
更改数据:localStorage.setItem(key,new-value)
注意:本地存储只能存储字符串

2. 本地存储分类-sessionStorage

特性:
生命周期为关闭浏览器窗口
在同一个窗口下数据可以共享
以键值对的形式存储使用
用法和localStorage基本相同

3. 本地存储-存储复杂数据类型

把对象转换成字符串进行存储,使用JSON

const obj ={
 uname:'li'  
 age:18
 gender:'男'
}
localStorage.setItem('obj',JSON.stringify(obj))
console.log(localStorage.getItem('obj'))

把字符串转换成对象进行取

localStorage.setItem(JSON.parse('obj'))