浏览器本地存储

总结：浏览器本地存储分为 ——

• 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

【总结】浏览器存储 对比表