离线储存

web 储存

Cookie

localStorage

sessionStorage

Application Cache 应用程序缓存

Indexed DB

cookie 是HTTP请求发送Set-Cookie HTTP头作为响应的一部分,通过name=value的形式储存的字符串string。

前端收到该响应后,会将cookie保存在浏览器内,并在每次的用户请求中携带该字符串

cookie 的作用是与服务器进行交互,是主要的储存方式,可以兼容包括IE6以上的所有浏览器。

cookie 数据会带到 Http Header 的字段里面,每次同主域名的请求中,都会传递数据

数据生命期 data expiry:可设置失效时间,默认是关闭浏览器后失效

存放数据大小 data size: 一般是4kb左右

与服务器通信 server connection: 每次都携带在HTTP Header 里面,如果使用Cookie保存过多, 会带来性能问题

易用性 usability: 需要自己封装,源生的Cookie接口不友好

应用场景:保存登录信息,创建购物车,跟踪用户行为 .txt

数据生命周期: 除非被清除,否则永远保存在本地

存放数据大小: 一般5MB

数据生命周期: 存储周期为当前会话,数据会在浏览器browsing session 结束时被清除,就是浏览器被关闭时,前进,后退,刷新数据依然存在。

存放数据大小: 5-10MB

与服务器通信: 在浏览器保存,不参与和服务器的通信

易用性: 源生接口可用,也可再次封装,对 Object Array 有更好的支持

储存值只能是字符串的形式,对于非字符串的数据,一般需要使用JSON.stringify方法压缩成字符串,使用时再用JSON.parse进行分析。

获取方式:window.sessionStorage

应用场景:敏感账户一次性登录

与服务器端通信: 仅在客户端保存,不参与和服务器的通信

易用性: 源生接口可用,也可再次封装,对 Object Array有更好的支持

储存值只能是字符串的形式,对于非字符串的数据,一般需要使用JSON.stringify方法压缩成字符串,使用时再用JSON.parse进行分析。

方法:
setItem("key", "value");
getItem("key");
removeItem("key");
clear()
key(index), 获取已知位置的key
length: 已经储存物品的数量

应用场景:保存购物车信息

click to edit

格式:Set-Cookie NAME=VALUE Expires/Max-age=DATE Path=PATH Domain=DOMAIN_NAME SECURE

SameSite, 为防止CSRF (Cross Site Request Forgery 跨站请求伪造) 攻击和用户追踪而新增的安全

Secure, 安全标志。设置参数后,该cookie只在https请求中才会被携带

HttpOnly,是否只能通过http请求传输。

Size, cookie的大小

Expires/Max-Age, cookie的失效时间,ms

Path, cookie的存储路径,默认是当前项目的根路径

Domain,既该网站所在的域, 域不区分端口号

value, cookie的值

name key, cookie的名字

通常用于静态资源(静态页面)的缓存

Application Cache,是浏览器的缓存中分出来的一块缓存区

要想在这个缓存中保存数据,可以使用一个描述文件 manifest file, 列出要下载和缓存的资源

Application Cache 通过 mainfest 文件指定了缓存的资源,可以使应用在断网的时候也能够使用

application cache的使用需要两步

服务器端需要维护一个manifest清单

html标签用属性<manifest>引入文件即可

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面

Set-Cookie: <cookie-name>=<cookie-value>

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

GET /sample_page.html HTTP/2.0
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;

客户能只读localStorage

客户能只读sessionStorage

方法:
setItem("key", "value");
getItem("key");
removeItem("key");
clear()
key(index), 获取已知位置的key
length: 已经储存物品的数量

只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文

打开多个相同的URL的Tabs页面,会创建各自的sessionStorage

同源的所有tag和窗口都共享

storage受到domain/protocol/port triplet的限制,不同的protocol (协议)或者subdomain内部有不同的storage对象,他们无法获取对方的数据

可以强制使用HTTPS

作用域:独立域名,子域名

不阻止JS访问

作用域:独立域名

作用域:独立域名,每个浏览器tab页

存储事件

setItems, removeItem, clear 的时候被触发

包含所有(key/oldValue/newValue)的数据,和文档url, 存储对象 storageArea.

触发所有能访问storage的windows对象,除了生成的对象之外

window.onstorage = event => {
if (event.key != 'now') return;
alert(event.key + ':' + event.newValue + " at " + event.url);
};
localStorage.setItem('now', Date.now());

如果两个window都在监听window.onstorage, 其中一个更新的时候,另一个也会更新

event.storageArea 包含storage object, 此event对于sessionStorage, localStorage相同,所以event.storageArea引用被修改的event。

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>

Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>

Set-Cookie: <cookie-name>=<cookie-value>; Secure

Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure

Session cookie: 不明确Expires/Max-Age,浏览器会话关闭时会被删除

Persistent cookie: 明确Expires/Max-Age, 通常来说 cookie 不会在关闭浏览器时失效,但是会在一个明确的日期(Expires) 或者时长(Max-Age) 失效。

以JS为基础的OO面向对象数据库

低级API,用于客户端存储大量结构化数据(包括文件和blobs Binary long Object 二进制长对象)

使用索引来实现对该数据的高性能搜索

一个运行在浏览器上的非关系型数据库

没有存储上限的(一般来说不会小于 250M)

不仅可以存储字符串,还可以存储二进制数据

除非被清理,否则一直存在

不参与与服务器的通信

特点

键值对储存

IndexedDB 内部采用对象仓库(object store)存放数据。

所有类型的数据都可以直接存入,包括 JavaScript 对象

对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误

异步

IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作

异步设计是为了防止大量数据的读写,拖慢网页的表现

支持事务 transaction

意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况

同源限制

IndexedDB 受到同源限制,每一个数据库对应创建它的域名

网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

储存空间大

储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

支持二进制储存

不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

常见操作

大部分操作并不是常用的调用方法,返回结果的模式,而是请求——响应的模式

建立打开IndexedDB ----window.indexedDB.open("testDB")

这条指令并不会返回一个DB对象的句柄,得到的是一个IDBOpenDBRequest对象

希望得到的DB对象在其result属性中,除了result,IDBOpenDBRequest接口定义了几个重要属性

onerror: 请求失败的回调函数句柄

onsuccess:请求成功的回调函数句柄

onupgradeneeded:请求数据库版本变化句柄

控制台得到一个 IDBDatabase对象,这就是IndexedDB对象


关闭IndexedDB----indexdb.close()

function closeDB(){ db.close();}

删除IndexedDB----window.indexedDB.deleteDatabase(indexdb)

function deleteDB(){indexedDB.deleteDatabase(name)}