总结:浏览器本地存储分为 ——
- cookie
- Web Storage (localStorage、sessionStorage)
- indexedDB
【tips】WebSQL属于关系型数据库,目前未列入html标准中,只有chrome、Safari等部分webkit浏览器支持,其他浏览器均不支持,IE11仅部分支持IndexedDB数据库。
(1)cookie
## 会话(Session)跟踪:
会话,指用户登录网站后的一系列动作,比如浏览商品添加到购物车并购买。会话跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。
常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。
### cookie和Session区别:
- cookie 通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份;
- cookie 数据存放在客户端,Session 数据放在服务器;
- Session 创建于服务器端,保存于服务器,维护于服务器。每创建一个新的Session,服务器端都会分配一个唯一的ID,并且把这个ID保存到客户端的Cookie中,保存形式是以JsessionID来保存的。
- cookie 不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。
- Session 可存储数据远高于 Cookie;
- cookie 只能保存 ASCII,Session 可以存任意数据类型;
- cookie 可设置为长时间保持,比如我们经常使用的默认登录功能,Session 一般失效时间较短,客户端关闭或者 Session 超时都会失效;
## cookie的特点
同源限制: cookie 可以跨越一个域名下的多个网页,但不能跨越多个域名使用。一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样,一般为20个。
## cookie运行机制
## cookie的使用
(2)Storage
## Storage 属性
- clear(): 清除所有storage
- setItem(name, value): 设置storage, 也可以通过点语法或者方括号设置
- getItem(name): 获取name对应的value值, 也可以通过点语法或者方括号获取
- removeItem(name): 删除单个storage。 也可以通过delete操作符删除
- key(index): 获取index位置处的name
## Storage 事件
在改变sessionStorage对象或者localStorage对象之后,就会触发Storage事件。也就是说,当 删除、修改、设置 storage时,都会调用Storage事件。Storage事件的事件对象存在以下属性。
- domain: 发生变化的存储的域名
- oldValue: 键值被修改前的值
- newValue: 如果是设置值,则对应一个新值;如果是删除值,则是null
- key: 设置或删除的键名
document.addEventListener('storage', (e) => {
console.log(e.domain)
console.log(e.key)
console.log(e.newValue)
console.log(e.oldValue)
}, false)
## Storage 子类
- localStorage 被浏览器以文件形式( 如 Firefox:webappsstore.sqlite)存储在电脑磁盘 中。
- localstorage 无法跨域(同源策略的限制),无法跨浏览器;
- localstorage 可通过storage event数据变化监听;
- SessionStorage 被浏览器以文件形式( sessionstore.jsonlz4 )存储在 电脑 内存 中。
- localstorage 无法跨页签,更无法跨域/跨浏览器;
(3)indexedDB 被浏览器存储在 电脑 磁盘 中。
## indexedDB 简介
indexedDB是浏览器内的本地数据库,属于非关系型数据库。
### indexedDB 特点
- 键值对储存:indexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
- 异步: indexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,锁死用户操作。
- 支持事务: indexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况,操作数据更安全。
- 支持索引: indexedDB 数据表可以建立索引,索引的意义在于,可以让你搜索任意字段,也就是说从任意字段拿到数据记录。如果不建立索引,默认只能搜索主键(即从主键取值)。
- 同源限制: indexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
- 储存空间大: indexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,大小一般是硬盘大小的50%,超过就会触发源回收。
- 支持二进制储存: indexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。
### indexedDB基本操作
【1】打开数据库
/**
* window.indexedDB.open() 返回一个 IDBRequest 对象,这个对象通过
* 三种事件:error、success、upgradeneeded 处理打开数据库的操作结果
*/
let request = window.indexedDB.open(
databaseName /*数据库名称:string*/,
version /*数据库版本:number*/
);
// 数据库打开报错
request.onerror = function(event) {}
let db;
// 数据库打开成功,获取数据库对象
request.onsuccess = function(event) {
db = request.result;// 也可写作:db = event.target.result;
}
// 数据库升级成功
request.onupgradeneeded = function(event) {
db = event.target.result;
}
【2】新建对象仓库(表)
// 表结构的操作 都是在 onupgradeneeded 这个事件里执行
request.onupgradeneeded = function(event) {
db = event.target.result;
let objectStore;
if (!db.objectStoreNames.contains('book')) {
objectStore = db.createObjectStore('book', { keyPath: 'id' }); // 建表(对象仓库)
objectStore.createIndex('name', 'name', { unique: true }); // 建索引
}
}
【3】关闭和删除数据库
db.close(); //关闭数据库
window.indexedDB.deleteDatabase(databaseName /*数据库名称:string*/); // 删除数据库
更多使用方法详见:IndexedDB - Web API 接口参考 | MDN