前端存储技术

 

1、介绍

前端存储就是通过前端技术存储一段信息，然后在不同页面（一般同域）都可以获取已存储信息的一种策略。

相较于后端，前端也可以存储一些数据以供前端不同页面处理，前端存储方案有WebStorage、IndexedDB、Web SQL、cookie，都有各自的优缺点，下面是一张从浏览器截取的全家图：

 

可以大致分为两种：

1. 小型数据存储：cookie、WebStorage
2. 大型数据存储：IndexDB、Web SQL

简单对比：

特性	cookie	localStorage	sessionStorage	indexDB	Web SQL
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	未限制	未限制
与服务端通信	每次都会携带在 header 中，对于请求性能影响	不参与	不参与	不参与	不参与

 

2、小型数据存储

cookie和WebStorage最主要的区别就是可以被携带到服务器端，这对一些需要记录浏览器端服务很重要，也是兼容性最强的一种策略，下面将详细介绍一下这两种前端存储策略

 

2.1 cookie

Cookie是在你浏览网页的时候，网站服务器放在客户端（Client End，就是你的电脑）里面的一个小小的TXT文件。这个文件里面存储了一些与你访问的这个网站有关的一些东西。

Cookie内存大小个数受限

	IE 6.0	IE 7.0 8.0	Opera	Fire Fox	Safari	Chrome
Cookie个数	每个域名下20个	每个域名下50个	每个域名30个	每个域名50个	没有限制	每个域名53个
Cookie大小	4095字节	4095字节	4096字节	4097字节	4097字节	4097字节

Cookie属性：

属性名	描述
Name	Cookie的名称，Cookie一旦创建，名称便不可更改
Value	Cookie的值，如果值为Unicode字符，需要为字符编码。如果为二进制数据，则需要使用BASE64编码
Domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。
Path	Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”。
Expires/Max-Age	Cookie失效的时间，单位秒。如果为整数，则该Cookie在maxAge秒后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为-1。
Size	Cookie的长度
HttpOnly	是否可被浏览器获取，如果cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息（document.cookie）
Secure	Secure为Cookie的安全属性，若设置为true，则浏览器只会在HTTPS和SSL等安全协议中传输此Cookie，不会在不安全的HTTP协议中传输此Cookie。该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false。
SameSite	用来限制第三方cookie，从而减少安全风险。可选值：strict、lux、none。 Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie； Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。 None关闭限制cookie，不过前提是设置Secure属性 若未设置则走浏览器配置的情况（谷歌samesite配置）
Priority	优先级，chrome的提案，定义了三种优先级，Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先清除。 在360极速浏览器和FireFox中，不存在Priority属性，不清楚在此类浏览器中设置该属性后是否生效。

 

2.2 WebStorage

WebStorage是html5新加的属性，为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器，Web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地，不清楚将永久保存

webstorage属性比较少，只有key、value，操作方法也比较简单

Storage.setItem("key","value") // 设置
Storage.getItem("key") // 获取
Storage.removeItem("key") // 移除
Storage.clear() // 清空

 

3、大型数据存储（前端数据库）

Web SQL和IndexedDB更向是后端服务器一样，大小一般不会被限制，可以存储大量数据，并且是永久性存储。

 

3.1 Web SQL

Web Sql Database，中文翻译作“本地数据库”，是随着HTML5规范加入的在浏览器端运行的轻量级数据库。WebSQL类似于mysql，更像是关系型数据库,使用SQL查询数据。

需要注意的是，HTML5已经会放弃Web SQL Database,原因是不符合W3C标准

Web SQL是关系型数据库，有了数据库、表、行、列的概念

 

核心方法

以下是规范中定义的三个核心方法：

1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
3. executeSql：这个方法用于执行实际的 SQL 查询。

/** 
 * 打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库
 * @params  1、数据库名称
 *          2、版本号
 *          3、描述文本
 *          4、数据库大小
 *          5、创建回调
 */
let db = openDatabase('mydb', '1.0', 'myDB', 2 * 1024 * 1024,()=>{
  console.log('打开、创建成功')
});
/** 
 * 操作数据库
 * @params  操作
 */
db.transaction((tx) => {
  // 建表
  tx.executeSql(
    'CREATE TABLE IF NOT EXISTS LOGS (id unique, name, pid)'
  )
  // 插入数据(增)
  tx.executeSql(
    'INSERT INTO LOGS (id, name, pid) VALUES (1, "log1", "0")'
  )
  // 删除数据(删)
  tx.executeSql('DELETE FROM LOGS  WHERE id=1')
  // 修改数据(改)
  tx.executeSql('UPDATE LOGS SET name="log2" WHERE id=1')
  // 查看数据(查)
  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
     console.log(results)
   }, null)
  // 关联查询 SQL
  `
    select e.id,e.pid,d.name as deptName
    from LOGS e
    LEFT OUTER JOIN  DEPT d
    ON e.pid = d.id
  `
})

 

3.2 IndexedDB

IndexedDB是浏览器提供的本地数据库，也是html5新出的，允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更像mongo，接近于NoSQL 数据库

总体来说这种NoSQL的存储方式对前端来说是更友好的，也更容易学习

总体来说和mongo存储方式比较相似，也是数据记录的形式存储，不会有表头的限制

主要概念：

1. 数据库：数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。
2. 对象仓库：每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。
3. 记录：对象仓库保存的是数据记录。每条记录类似于关系型数据库的行。

核心方法

以下是规范中定义的三个核心方法：

1. open：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
2. createObjectStore：创建对象仓库
3. transaction：事务，增删改查都需要先经过事务才能接着操作

/** 
 * 打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库
 * 所有后续操作都在onupgradeneeded生命周期操作
 * @params  1、数据库名称
 *          2、版本号
 */
var request = window.indexedDB.open(
  databaseName, version
)
// 版本更新生命周期回调
request.onupgradeneeded = function (event) {
  db = event.target.result;
  // 创建对象仓库
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    // 创建一个名为person主键为id的对象仓库
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
    // 创建索引（创建后可根据索引索取数据）
    objectStore.createIndex('name', 'name', { unique: false });
  }
  // 新增数据
  db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '张三' })
  // 删除数据
  db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);
  // 修改数据
  db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: '李四' })
  // 根据索引查看数据
  db.transaction(['person'])
    .objectStore('person')
    .index('name')
    .get('李四').onsuccess = function (e) {
        console.log(e.target.result)
    }
}