浏览器的几种数据存储方式---localStorage、sessionStorage、IndexDB、Cookie与JSON数据格式的详解

一、JSON数据格式

在目前的开发中，JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。

应用场景：

• 网络数据的传输JSON数据；
• 项目的某些配置文件；
• 非关系型数据库（NoSQL）将json作为存储格式；

其他的传输格式：

XML：在早期的网络传输中主要是使用XML来进行数据交换的，但是这种格式在解析、传输等各方面都弱于JSON，所以目前已经很 少在被使用了；

Protobuf：另外一个在网络传输中目前已经越来越多使用的传输格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所 以目前在前端使用的较少；

1.JSON基本语法:

JSON的顶层支持三种类型的值：

• 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
• 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
• 数组值：数组的值可以是简单值、对象值、数组值；

2.JSON序列化

有时候我们想要把一个对象保存到localStorage中，但是如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果。

JSON序列化方法：

• stringify方法：将JavaScript类型转成对应的JSON字符串；
• parse方法：解析JSON字符串，转回对应的JavaScript类型；

代码示例：

const obj = {
  name: "kk",
  age: 18,
  friend: {
    name: 'ss'
  },
  hobbies: ["篮球", "游泳"]
}

// 我们需要将这个对象存到localStorage里，如果直接将obj传入 他的值会变为[object, Pbject]
// localStorage.setItem("obj", obj) // [object, Pbject]

// 将obj转化为JSON格式 序列化
const objString = JSON.stringify(obj)
localStorage.setItem('obj', objString) // {"name":"kk","age":18,"friend":{"name":"ss"},"hobbies":["篮球","游泳"]}

// 将JSON转化为对象
const info = JSON.parse(objString)
console.log(info);

Stringify的参数：

repalce：

• replacer 为函数，则可以选择性地替换值；
• replacer 为是数组，则可选择性地仅包含数组指定的属性；

// 1.第一个参数 转成字符串
const objString1 = JSON.stringify(obj)
console.log(objString1); // {"name":"zyk","age":18,"friend":{"name":"ss"},"hobbies":["篮球","游泳"]}

// 2.第二个参数 replacer 
// 2.1 传入一个数组 将指定的属性转化
const objString2 = JSON.stringify(obj, ["name", "friend"])
console.log(objString2); // {"name":"zyk","friend":{"name":"ss"}}

// 2.2.第三个参数 回调函数
const objString3 = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return value + 1
  }
  return value
})
console.log(objString3); // {"name":"zyk","age":19,"friend":{"name":"ss"},"hobbies":["篮球","游泳"]}

space：

默认在前面加两个空格 也可以指定其他字符 比如 "--" 表示在前面加两个--

// 3.第三个参数 默认在前面加两个空格 也可以指定其他字符 比如 "--" 表示在前面加两个--
const objString4 = JSON.stringify(obj, null, 2)
console.log(objString4);

parse方法:

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。

可选的 reviver 函数用以在返回之前对所得到的对象执行变换(操作)

const JSONString = '{"name":"zyk","age":18,"friend":{"name":"ss"},"hobbies":["篮球","游泳"]}'

const info = JSON.parse(JSONString)
console.log(info);

// 参数 reviver 函数用以在返回之前对所得到的对象执行变换(操作)

const info1 = JSON.parse(JSONString, (key, value) => {
  if(key === "age") {
    return value - 1
  }
  return value
})
console.log(info1);

使用JSON序列化深拷贝\

深拷贝：生成一个新对象，新对象和之前的并不是同一个对象

// 3.深拷贝
// 对函数无效 因为JSON不支持函数
const JSONString = JSON.stringify(obj)
const info3 = JSON.parse(JSONString)
obj.friend.name = "curry"
console.log(info3.friend.name); // kk

注意：这种方法它对函数是无能为力的，创建出来的info中是没有foo函数的，这是因为stringify并不会对函数进行处理。

二、Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：

• localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
• sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

localStorage和sessionStorage区别：

• 关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
• 在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
• 在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

Storage常见的方法和属性：

• 属性：
  • Storage.length：只读属性，返回一个整数，表示存储在Storage对象中的数据项数量；
• 方法：
  • Storage.key()：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
  • Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
  • Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key已经存储，则更新其对应的值；
  • Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
  • Storage.clear()：该方法的作用是清空存储中的所有key；

三、IndexedDB

它是一种数据库（Database），有时候我们可能会存储一些简单的数据到本地（浏览器中），比如token、用户名、密码、用户信息等，比较少存储大量的数据；那么如果确实有大量的数据需要存储，这个时候可以选择使用IndexedDB；

IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据。

• 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）；
• 它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）；

IndexDB的操作：

• 连接数据库
  • 第一步：打开indexDB的某一个数据库；
    • 通过indexDB.open(数据库名称, 数据库版本)方法；
    • 如果数据库不存在，那么会创建这个数据；
    • 如果数据库已经存在，那么会打开这个数据库；
  • 第二步：通过监听回调得到数据库连接结果；
    • 数据库的open方法会得到一个IDBOpenDBRequest类型
    • 我们可以通过下面的三个回调来确定结果：
      • onerror：当数据库连接失败时；
      • onsuccess：当数据库连接成功时回调；我们可以通过onsuccess回调的event获取到db对象：event.target.result
      • onupgradeneeded：当数据库的version发生变化并且高于之前版本时回调；通常我们在这里会创建具体的存储对象：db.createObjectStore(存储对象名称, { keypath: 存储的主键 })
• 数据库操作
  • 对数据库的操作要通过事务对象来完成：
    • 第一步：通过db获取对应存储的事务 db.transaction(存储名称, 可写操作)；
    • 第二步：通过事务获取对应的存储对象 transaction.objectStore(存储名称)；
  • 增删改查操作
    • 新增数据 store.add
    • 查询数据
      • 方式一：store.get(key)
      • 方式二：通过 store.openCursor 拿到游标对象
        • 在request.onsuccess中获取cursor：event.target.result
        • 获取对应的key：cursor.key；
        • 获取对应的value：cursor.value；
        • 可以通过cursor.continue来继续执行；
    • 修改数据 cursor.update(value)
    • 删除数据 cursor.delete()

四、Cookie

Cookie（复数形态Cookies），又称为“小甜饼”。类型为“小型文本文件，某些网站为了辨别用户身份而存储在用户本地终端 （Client Side）上的数据。比如，浏览器会在特定的情况下携带上cookie来发送请求，我们可以通过cookie来获取一些信息；

Cookie总是保存在客户端中，按在客户端中的存储位置，Cookie可以分为内存Cookie和硬盘Cookie。

• 内存Cookie由浏览器维护，保存在内存中，浏览器关闭时Cookie就会消失，其存在时间是短暂的；
• 硬盘Cookie保存在硬盘中，有一个过期时间，用户手动清理或者过期时间到时，才会被清理；

内存Cookie和硬盘Cookie：

• 没有设置过期时间，默认情况下cookie是内存cookie，在关闭浏览器时会自动删除
• 有设置过期时间，并且过期时间不为0或者负数的cookie，是硬盘cookie，需要手动或者到期时，才会删除；

cookie常见的属性：

• cookie的生命周期：
  • 默认情况下的cookie是内存cookie，也称之为会话cookie，也就是在浏览器关闭时会自动被删除；
  • 通过设置expires或者max-age来设置过期的时间
    • expires：设置的是Date.toUTCString()，设置格式是;expires=date-in-GMTString-format；
    • max-age：设置过期的秒钟，;max-age=max-age-in-seconds (例如一年为60*60*24*365)；
• cookie的作用域：（允许cookie发送给哪些URL）
• Domain：指定哪些主机可以接受cookie
  • 如果不指定，那么默认是 origin，不包括子域名。
  • 如果指定Domain，则包含子域名。例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）。
• Path：指定主机下哪些路径可以接受cookie
  • 例如，设置 Path=/docs，则以下地址都会匹配：
    • /docs
    • /docs/Web/
    • /docs/Web/HTTP

客户端设置cookie

js直接设置和获取cookie：

console.log(document.cookie)

这个cookie会在会话关闭时被删除掉,因为没有设置过期事件

document.cookie = "name=kk"
document.cookie = "age=18"

设置cookie，同时设置过期时间（默认单位是秒钟）

document.cookie="name=kk;max-age=10"