为什么断网时网页的首页也能打开？-聊聊本地存储

2022-04-27 108 阅读2分钟

前言:

以前我们页面写的数据一刷新页面就没有了，是不是？随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量比较大，sessionStorage和localStorage约5M左右

本地存储分类

localStorage

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

可以多页面共享
以键值对的形式存储使用

语法存储数据： localStorage.setItem(key, value)

获取数据： localStorage.getItem(key)

删除数据： localStorage.removeItem(key)

浏览器查看本地数据

sessionStorage

特性：

生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储
用法跟localStorage基本相同

存储复杂数据类型

本地只能存储字符串，复杂的数据类型无法直接存储，需要转换成字符串的形式

const person = {
    name: '法外狂徒张三',
    age: 18,
    gender: '男'
}
localStorage.setItem('person', person)

解决： 需要将复杂数据类型转换成JSON字符串，在存储本地
JSON.stringify(复杂数据类型)

 const person = {
      name: '法外狂徒张三',
      age: 18,
      gender: '男'
    }
    localStorage.setItem('person', JSON.stringify(person))

将复杂数据类型转换成JSON字符串，存储在本地存储中

问题： 因为本地存储里面取出来的是字符串，不是对象，无法直接使用

 const obj = localStorage.getItem('person')
    console.log(obj);

解决： 把取出来的字符串转换为对象
JSON.parse(JSON字符串）

 const obj = JSON.parse(localStorage.getItem('person'))
    console.log(obj);