浏览器中的 JavaScript - 存储方案知多少?

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力

浏览器中的 `JavaScript` 之存储方案

本文来聊一聊 web 应用使用浏览器的 API 在客户端上存储数据, 让客户端浏览器记住一些信息, 比方说: web应用存储用户偏好, 存储一些缓存等, 以方便恢复最近一次离开是的情境, 提高用户体验等等.

通过浏览器在客户端的存储分为下面几种形式:

Web Storage:

loclStorage 和 sessionStorage --- 映射字符串键和值的持久化对象(易用)
cookie: 一种古老的客户端存储机制

浏览器也有提供了一种笨拙的 JavaScript API，可以在客户端操作 cookie。但这个 API 很难用，而且只适合保存少量数据。保存在cookie中的数据也会随 HTTP 请求发送给服务器，哪怕这些数据只对客户端有用。
indexDB

一种异步 API，可以访问支持索引的对象数据库。

1. `loclStorage` 和 `sessionStorage`

本地存储方案: 在 Window 对象中的 localStorage 和 sessionStorage 属性引用的是 Storage 对象。

Storage对象与普通 JavaScript 对象非常类似，只不过: Storage对象的属性值必须是字符串;

Storage对象中存储的属性是持久化的。如果你设置了 localStorage 对象的一个属性，然后用户刷新了页面，你的程序仍然可以访问在该属性中保存的值。

1.1 设置获取存储的值

示例如下，可以像下面这样使用 localStorage 对象:

let name = localstorage.username; // 查询获取存储的值
if(!name){
name = prompt("What is your name?"); // 向用户提问
localStorage.username = name; // 存储用户的回答

1.2 删除 storage对象属性值

可以使用 delete 操作符删除localStorage和sessionStorage的属性，

1.3 清除所有存储

如果想删除 Storage对象的所有属性，可以调用 clear()方法:

localStorage.clear();

1.4 遍历枚举 `Storage对象`的属性

可以使用 for...in 循环或 Object.keys() 枚举 Storage对象的属性。

1.5 其他方法

Storage对象也定义了

getItem()、
setItem()
deleteItem()

这些方法，可以用来代替直接读写属性和 delete 操作符。

☆ 注意: 因为 Storage 对象的属性只能存储字符串。如果想存取其他类型的数据，必须自己编码和解码。

编码 & 解码方法示例:

// 如果存储数值，数值会自动转换为字符串
// 别忘了在读取完这个值以后解析它 localstorage.x=10; 这个10 为字符串
let x = parseInt(localStorage.x); // 10

// 利用 JSON 编码存储, parse 解码 读取
localStorage.data = JSON.stringify(data)
let data = JSON.parse(localStorage.data)

1.6 `loclStorage` 和 `sessionStorage` 两者区别

两者主要区别在于生命期和作用域上,

生命期

localStorage 存储是永久的, 除非web 应用或用户通过浏览器删除, 否则永久保存在用户设备上; 而后者 sessionStorage存储的数据则会在浏览器标签页或窗口关闭时都会被删除
作用域

两者的作用域都是文档来源(由协议/域名/和端口共同定义). localStorage 同源文档共享, 可以读取也可以修改.

而 sessionStorage 不同源文档不共享, 而且不同标签页/ 不同窗口也都是互相隔离的, 不能访问

2. `cookie`

2.1 什么是 cookie ？

cookie 的释意就是会话跟踪技术

☆ 作用: 数据存储、数据共享是存在浏览器上的数据

会话：从浏览网站开始到结束的这个过程称为一次会话浏览器关闭表示会话结束
会话跟踪技术 ：客户端向服务器端请求数据，多次请求时，实现数据共享的过程，称为会话跟踪技术.

解释:

m8-day14--cookie1

2.2 cookie 存取

取: document.cookie 取 cookie
存: document.cookie = "键=值" 键的名称可以按照标识符的命名规范值是一个字符串

documnet.cookie = "username = xn213"

字符串和对象之间类型转换

向 cookie 中存储数据时必须存字符串
将字符串转成对象： JSON.parse() '{"username":"xn213"}' '[{},{},{}]'
将对象转成字符串： JSON.stringify() [] {}

2.3 cookie 的生存期

生存期 ： cookie 数据在浏览器中保存的时间

如果不设置生存期，浏览器关闭，表示会话结束，cookie 数据自动删除
如果设置生存期，浏览器关闭，cookie 数据保存在浏览器上，生存期内 cookie 不会自动删除
如何设置生存期？？需要 expires 参数

document.cookie = "键=值;expires=过期时间" 过期时间格式：要求标准时间格式

2.4 删除 cookie

需要以相同的名字路径和域再设置一遍: 将某个键的值设置为 "" 或将生存期设置为 -1

2.5 使用 cookie 需要注意

1、cookie 存储的 数据安全性低 2、cookie 存储的 数据量小 最多存 4kb 数据一般不能超过50个cookie 3、cookie 不能跨文件夹访问 在 a 目录下存储的 cookie 在 b 目录下不能访问到 a 中的 cookie 数据

3. `IndexedDB`

3.1 理解:

IndexedDB 是一个对象数据库. 而不是关系型数据库, 比支持 SQL 查询的数据库更简单, 而且比上面提到的 localstorage 提供的存储机制更强大, 更高效, 更可靠.

3.2 作用域

IndexedDB 的作用域也是限定为包含文档的来源. 即两个同源的网页可以互相访问数据, 但是不同源的网页不能互相访问数据.

3.3 简单使用

IndexedDB的API 也非常简单

.open(库名)
get()
getAll()
openCursor()

简单的小示例:

// 第一个参数: 请求数据库; 第二个参数: 为数据库 版本 v1
let request = indexedDB.open('zipcodes', 1)
// 其他具体 api另行探索