揭秘前端存储

时间  2019-11-08
标签 揭秘 前端 存储 繁體版
原文   原文链接

最近在项目中使用了部分的前端存储，以前只有一些简单的了解，今天就趁这个机会把前端存储进行深刻研究一番。javascript

写在开始

前端存储的好处：

  • 方便网页的加载，避免了在发送请求收到响应前页面的空白期。
  • 也能够在非强制性要求实时最新数据时减小向服务端的请求，加快渲染速度。
  • 在网络不佳或无网络时仍有离线数据能够查看。

前端存储的方式：

首先咱们应该先清除大概都有哪些存储方式，对此咱们只须要打开控制台，选择 application 来进行查看。html

A5HpRI.jpg

咱们能够看到，存储大概分为两大类，一类为 存储类 ，另外一类为 缓存类。前端

存储类：

  • Web存储 （Web Storage）：HTML 5 中提出的存储方式，容量有 5 M。java

    • localStorage
    • sessionStorage

  • Cookie：浏览器广泛支持的基于 HTTP 协议的存储方式，但容量只有 4 KBgit

  • 数据库存储：github

    • IndexDB
    • Web SQL
缓存类:
  • Cache Storage: 在 Service Worker 的规范中提出，通常配合 Service Worker 进行离线缓存。
  • Application Cache： 在 HTML5.1提出的缓存方式，可用来构建离线应用。

介绍

个子小的长兄 —— Cookie

HTTP Cookie，它最初适用于客户端存储会话信息的、这个标准要求服务器对 HTTP 请求设置 Set-Cookie HTTP 头做为响应的一部分，其中会包含有会话信息。浏览器在 Cookie 中存储绘画信息，并在发送请求时将 Cookie 一块儿发送过去。web

Cookie 的构成

咱们先打开 github 以后进入控制台查看一下sql

AIgIEt.jpg

  • 名称
  • 值
  • 域
  • 路径
  • 失效时间 （格林威治时间）
  • 大小
  • 是否为 HTTP请求
  • 安全性

域 路径 失效时间 和 安全性 都是服务器给浏览器的指示，他们不会随着请求发送给服务器，发送给服务器的只有名称与值对。数据库

Cookie 的限制性

  • 若是设定了 Cookie 的过时时间，那么 Cookie 会在到期时自动失效。
  • 若是没有设定过时时间，那么 Cookie 就是 session 级别的，即浏览器关闭时 Cookie 自动消失。

Cookie 的优缺点

优势：跨域

1. 能够控制过时时间，不会永久有效，有必定的安全保障。
2. 可进行扩展，可跨域共享。
3. 经过加密与安全传输技术 （SSL） ，能够减小 Cookie 被破解的可能性。
4. 有较高的兼容性。
复制代码

缺点：

1. 有必定的数量与长度限制，每一个 Cookie 长度不能超过 4 KB ，不然超出部分会被截掉。
2. 请求头上的数据容易被拦截攻击。
复制代码

新生力量 Web Storage

LocalStorage 与 SessionStorage

咱们能够先看一下它的兼容性，许多浏览器已经彻底支持了它：

AIW1HA.md.jpg
AIWlBd.md.jpg

数据来源： MDN

出现缘由

  • 克服 Cookie 的一些限制，同时存储一些须要严格控制在客户端，不须要发送给服务器的一些数据。
  • 提供了除 Cookie 以外的另外一种存储会话的途径。
  • 提供了一种大容量存储空间来跨回话存储数据的途径。

如何查看

它们都是直接做为 window对象的属性存在的，咱们能够直接经过 window.localStorage 与 window.sessionStorage 来访问。

AIf7Zj.jpg

同时，咱们观察到 Web Storage 只能储存字符串，若是用 Web Storage 存储对象，会出现 [Object Object], 能够用 JSON.stringify 与 JSON.parse方法来解决这个问题。

Web Storage 实例方法

  • clear：删除全部值
  • getItem(name): 根据传入的键来获取对应的值。
  • key(index): 得到所对应索引的键，名称。
  • removeItem(name): 删除键对应的键值对
  • setItem(name, value): 为指定的 name 设置一个对应的值。
没有感情的 sessionStorage
  • 同源策略： 不一样于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。
  • 单标签页： 两个相同域下的标签页不能互通。
  • 在关闭标签页或者新开的标签页下都不能访问以前写下的 sessionStorage
  • 刷新标签页依然能够访问 sessionStorage

使用的场景：

1. 主要针对会话级的小数据的存储。
2. 存储一些在当前页面刷新仍然须要存储，可是关闭后不须要留下的信息。
3. 很适合单页应用的使用，能够用来存储登陆态信息等。
复制代码

不离不弃的 localStorage

  • 同源策略：和 sessionStorage 同样，要访问同一个 localStorage 页面必须来自同一个域名，同种协议，同种端口。
  • localStorage 设定后，刷新或者从新打开标签页，关闭浏览器从新打开原来的标签页也能够访问到。

使用的场景：

1. 持久性的保存客户端数据，只能经过 JavaScript 删除或者用户清除浏览器缓存。
2. 若是有一些稍大量的数据，例如编辑器的自动保存等。
3. 多页面间访问共同数据。 sessionStorage 只能用于一个标签页，而localStorage能够在多个标签页之间共享。
复制代码

sessionStorage 与 localStorage 的区别

  • 生命周期：localStorage 是本地存储，没有期限，只能用户本身操做来删除。 sessionStroage 是会话存储，页面关闭数据就会丢失。
  • sessionStorage 有单标签页的限制，localStorage则没有。

Storage 事件

咱们对 Storage 对象进行任何的操做，都会在文档上触发 Storage 事件， 这个事件的 event 对象有如下属性：

  • domain：发生变化的存储空间的域名。
  • key：设置或删除的键名
  • newValue： 若是是设置值，则是新值。若是是删除键，则为null。
  • oldValue：键被更改以前的值。

数据库级别： IndexDB 与 Web SQL

Web SQL 相似关系型数据库， 它使用 sql 语句进行相关操做。

indexDB 相似 NoSQL ， 直接使用 js 的方法操做数据。

特色：

  • 访问：indexDB 和 Web SQL 和 Web Storage 同样，均是只能在建立数据库的域名下才能访问。
  • 存储时间：存储时间为永久，除非用户清除数据，他可用做长期的存储。
  • 大小限制：两者其实没有强制限制。只是 indexDB 在数据超过 50 M 以后会从浏览器弹出一个框让你确认。
  • 性能： indexDB 查询速度会相对较慢，而 Web SQL 的性能相对较快。

实际操做

第一步打开数据库

var request = indexedDB.open(name, version);
复制代码

第一个参数为数据库的名称，第二个参数为数据库的版本号。

第二步添加数据

建立事务，并加上数据读写权限。

var transaction = db.transaction(storeName, 'readwrite');
复制代码

获取 objectStore 再调用add方法添加数据

var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function (e) {
    data = e.target.result;
    console.log(student.name);  
};
复制代码

第三步删除数据

删除也须要建立事务，调用删除接口 ，经过key删除对象。

var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);

store.delete(key);
复制代码

第四步查找数据

  • 按key查找

    开启事务，获取到 objectStore ，调用get()方法获取对象。

    var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function (e) {
    data = e.target.result;
    console.log(student.name)
};
复制代码

  • 使用索引查找

    咱们在使用索引以前须要先建立索引，它使用 createIndex方法建立索引，方法有三个参数: 索引名称、索引属性字段名，索引属性值是否惟一。

    objectStore.createIndex('name','name', {
    unique: false
})
复制代码

    建立好了索引，咱们就可使用索引进行查询：

    var transaction = db.transaction(storeName);
var store = transaction.objectStore(storeName);
var index = store.index(search_index);
index.get(value).onsuccess = function (e) {
    data = e.target.result;
    console.log(student.id);
}
复制代码

  • 游标遍历数据

    var transaction = db.transaction(storeName);
var store = transaction.objectStore(storeName);
var request = store.openCursor(); //成功打开游标
var dataList = new Array();
var i = 0;
request.onsuccess = function (e) {
    var  cursor = e.target.result;
    if (cursor) {
        console.log(cursor.key);
        dataList[i] = cursor.value;
        console.log(dataList[i].name);
        i++;
        cursor.continue();
    }
    data = dataList;
}
复制代码

第五步，更新对象

为了更新对象，咱们首先要把它取出来，进行修改以后再放回去。

var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function (e) {
    var data = e.target.result;
    for (a in newData) {
        data.a = newData.a;
    }
    store.put(data);
}
复制代码

第六步，关闭与删除

关闭数据库须要调用数据库的 close 方法

db.close();
复制代码

删除数据库使用数据库对象 deleteDatabase 方法

function deleteDB (name) {
    indexedDB.deleteDatabase(name);
}
复制代码

IndexDB 特色

  • 它的数据保存在对象存储空间中。
  • 建立对象存储空间，首先先定义一个键，以后添加数据。
  • 可使用游标查询。

indexDB 的兼容性仍是一大问题，Web SQL 虽然过期，但兼容性却仍然很是好，移动端几乎都可用。

Cache Storage

Cache Storage 是用来存储 Response 对象 ，也就是对 HTTP 响应进行缓存。 Cache Storage 是多个 cache 的集合，每一个 cache 能够存储多个响应对象。它基于 Promise。这里不作详细的赘述。

Application Cache

它是 HTML5 中新引入的应用程序换粗技术，它的出现意味着 web 应用能够经过缓存，在没有网络的环境下运行，构建离线应用。

优势:

  • 离线浏览
  • 提高页面的载入速度
  • 下降服务器的压力

通常来讲 Application Cache 只用来存储一些静态资源，它的使用方式主要须要两个步骤：

1.服务端维护一个 manifest清单

2.浏览器端进行一个设置。

<html manifest="demo">
复制代码

通常的，咱们必须给 manifest 文件设置正确的 MIME-type 为 "text/cache-manifest"，它须要在服务器端进行配置。

在 Progressive Web Application 中， Application Cache 配合 Service Worker 承担着主要的任务。

参考文献

MDN: LocalStorage , sessionStorage, indexDB

本地存储与离线存储

前端存储之IndexDB

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程