本文已参与掘金创作者训练营第三期「话题写作」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力
浏览器中的 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 的释意就是 会话跟踪技术
☆ 作用: 数据存储、数据共享 是存在浏览器上的数据
-
会话 : 从 浏览网站开始 到 结束的这个过程 称为一次会话 浏览器关闭 表示会话结束
-
会话跟踪技术 : 客户端向服务器端请求数据,多次请求时,实现数据共享的过程,称为会话跟踪技术.
解释:
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另行探索