JavaScript の 本地存储

本地存储

简单讲就是将数据存储在浏览器中

大概总共可以存储10M的数据

本地存储分类

1. localStorage

• 作用

可以将数据永久存储在本地（用户的电脑），除非手动删除，否则页面关闭也还是存在

• 特性

可以多窗口（页面）共享数据

以键值对的形式存储

• 存储数据

localStorage.setItem(key,value)

• 获取数据

localStorage.getItem(key)

• 删除

localStorage.removeItem(key)

本地存储只能存储字符串数据类型，就算存的时候写的数字也会被转换为字符串

2. sessionStorage

• 特性

生命周期为关闭浏览器窗口，即关闭浏览器窗口后里面的数据就会消失

可以在同一个窗口（页面）共享数据

同样是用键值对存储数据

用法与localStorage基本相同

• 存储复杂数据类型

因为本地存储只能存储字符串数据类型，所以无法直接存储对象

所以需要将复杂数据类型转换成JSON字符串，再存储到本地

• 对象转换为JSON字符串

  语法：

  JSON.stringify(复杂数据类型)

  经过JSON转换的对象，属性与值都会加上双引号

  示例

      let obj={
        name:'hehe',
        sex:'male'
      }
      localStorage.setItem('obj',JSON.stringify(obj))//将对象转换为JSON字符串再存储
  

• JSON字符串转换为对象

  语法：

  JSON.parse(JSON字符串)

  示例

      let obj={
        name:'hehe',
        sex:'male'
      }
      localStorage.setItem('obj',JSON.stringify(obj))//将对象转换为JSON字符串再存储
      JSON.parse(localStorage.getItem('obj'))//将从localStorage中获得的JSON字符串转化为对象