往往做项目时会有一些特殊的需求,需要将一些信息存储到本地,如鉴权token、登录信息等这时一些不必要的请求就可以通过使用浏览器本地存储的方式来避免。
常用的浏览器存储方案有哪些呢?主要有:cookie、localStorage、sessionStorage以及indexDB。本文将对此进行简要介绍
cookie
属于文档对象模型DOM树根节点document,而 sessionStorage
、localStorage
和indexedDB
属于浏览器对象模型BOM的对象window。
1、cookie
h5之前,存储主要用cookies,缺点是在请求头上带着数据,导致流量增加。大小限制4k
。cookie也是在所有同源窗口中都是共享的,同时受path
的约束。
通过Chrome DevTools操作
用法:
document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// 显示: name=oeschger;favorite_food=tripe
expires
过期时间,当过了到期日期时,浏览器会自动删除该cookie,如果想删除一个cookie,只需要把它过期时间设置成过去的时间即可
比如希望设置过期时间一年:new Date().getTime() + 365 * 24 * 60 * 60 * 1000
如果不设置过期时间,则表示这个cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,cookie就消失了。
path
路径,值可以是一个目录,或者是一个路径。
如果cc.com/test/index.html
建立了一个cookie,那么在cc.com/test/
目录里的所有页面,以及该目录下面任何子目录里的页面都可以访问这个cookie。因此在cc.com/test/test2/test3
里的任何页面都可以访问cc.com/test/index.html
建立的cookie。若cc.com/test/
若想访问cc.com/test/index.html
设置的cookie,需要把cookie的path属性设置成“/”。
在指定路径的时候,凡是来自同一服务器,URL里有相同路径的所有WEB页面都可以共享cookies。
domain
主机名,是指同一个域下的不同主机,例如:www.baidu.com
和map.baidu.com
就是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制:document.cookie = "name=value;domain=.baidu.com"
这样,所有*.baidu.com
的主机都可以访问该cookie。
此外作为一个格式化过的字符串,cookie的值有时很难被自然地处理,因此推荐使用MDN中推荐的一个小工具函数来方便操作。
2、localStorage
以键值对(Key-Value)的方式存储,键值对总是以字符串的形式存储,永久存储,永不失效,除非手动删除。IE8+支持,每个域名限制5M
。打开同域的新页面也能访问得到。
通过Chrome DevTools操作
window.localStorage.setItem('myCat', 'Tom'); // 设置
let cat = window.localStorage.getItem('myCat'); // 读取
window.localStorage.removeItem('myCat'); // 移除
window.localStorage.clear(); // 清空所有
window.localStorage.key(1); // 读取索引为1的值
window.localStorage.length; // 数目
3、sessionStorage
sessionStorage
操作的方法与localStorage
是一样的,区别在于 sessionStorage
当前页面有效,在关闭页面后即被清空,而 localStorage
除非删除,会一直保存。
通过Chrome DevTools操作
注意,刷新页面sessionStorage不会清除,但是打开同域新页面访问不到
4、indexedDB
当数据量不大时,我们可以通过SessionStorage
或者LocalStorage
来进行存储,但是当数据量较大,或符合一定的规范时,我们可以使用数据库
来进行数据的存储。
通过Chrome DevTools操作
IndexedDB 鼓励使用的基本模式如下所示:
- 打开数据库。
- 在数据库中创建一个对象仓库(object store)。
- 启动一个事务,并发送一个请求来执行一些数据库操作,像增加或提取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 在操作结果上进行一些操作(可以在 request 对象中找到)
DEMO
const dbName = "demo_db";
//打开我们的数据库,第二个参数为数据库版本号,默认为1
var request = window.indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 错误处理
};
request.onupgradeneeded = function(event) {
// 保存 IDBDataBase 接口
var db = event.target.result;
//为该数据库创建一个对象仓库
var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
// 建立一个索引来通过姓名来搜索客户。名字可能会重复,所以我们不能使用 unique 索引
objectStore.createIndex("name", "name", { unique: false });
// 使用邮箱建立索引,我们向确保客户的邮箱不会重复,所以我们使用 unique 索引
objectStore.createIndex("email", "email", { unique: true });
// 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
objectStore.transaction.oncomplete = function(event) {
// 将数据保存到新创建的对象仓库
var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
customerData.forEach(function(customer) {
customerObjectStore.add(customer);
});
};
详细使用方式不在此处详细介绍可详细阅读https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
需要注意的是:
并不能直接通过Chrome的DevTools直接编辑IndexedDB键和值。但是,由于DevTools可以访问页面上下文,因此可以在DevTools中运行JavaScript代码来编辑IndexedDB数据。此外Chrome的DevTools面板中的IndexedDB值不会实时更新,查看数据时建议手动点击刷新按钮。
注意
不是什么数据都适合放在本地存储中的,因为它们保存在本地容易被篡改,使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储你系统中的敏感数据。