熊敬之
0%

前端存储

Posted on

概述

image.png直接打开Chrome Dev，Application与前端存储相关。

最大能存4k，全是字符串，在HTTP协议中，服务费通过Set-Cookie也能设置。

http协议设置

在Set-Cookie中比浏览器多的属性有

  • HttpOnly，只能通过http协议来设置，不让前端处理

  • SameSite=Strict|Lax|None，在chrome2020年底之前，默认全是Lax，之后是None，如果是None的话，必须设置secure。为Strict时，从A页面对B页面进行跨页面，不会带上A页面Cookie，为了防止CSRF。具体规则如下表：

  • image.png

  • image.png

  • 一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，需要添加同样多的set-Cookie字段。

  • 服务端可以设置cookie 的所有选项：expires、domain、path、secure、HttpOnly 、sfads

image.png

前端设置

document.cookie 获取全部cookie值
document.cookie = newCookie, 只能设置/更新一个cookie，附加属性用分号;风格。
document.cookie = encodeURIComponent(“hello=world;path=/;domain=.example.com;expires=Wed, 14 Jun 2017 07:00:00 GMT;secure”)

附加属性

  • ;path=path，默认是/（/的子路径都可以访问），使用/bar的话，只有/bar, /bar/11这些的子域名能访问。
  • ;domain=domain，设置的域名包含其子域名，example.com，包含了则aaa.example.com，可以用来cookie共享。
  • ;max-age=max-age-in-seconds, 设置cookie过期时间，单位为秒数。（365 24 60 * 60）一年。在除了老版本的IE浏览器中，max-age的优先级大于expires。ie6、ie7 和 ie8不支持max-age
  • ;expires=_date-in-GMTString-format，设置过期日期，格式为_toUTCString格式，如Wed, 14 Jun 2017 07:00:00 GMT。
  • ;secure，只要存有这个字段，即设置协议只能通过https协议。
  • 设置值字符串时为了保证字符串不包含逗号，分号，空格，需要转义encodeURIComponent()。
  • 删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。

SessionStorage

生命周期只是对话通信中，浏览器中两个Tab不会贡献，重新加载或恢复页面会恢复SessionStorage，只有关闭Tab或者window会清除。
实例方法：setItem(name)，getItem(name)，

LocalStorage

2.5MB，5MB，无限

IndexedDB

事实上前端数据库标准，类似mongoDB，非关系性数据库。一般是250M，甚至无上限。可以与web worker整合。
适合存储大量结构化数据。

特点

  • 键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
  • 异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
  • 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
  • 同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
  • 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
  • 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
  • 需要手动更新或者手动删除

前端设置

window.indexedDB.open(‘DatabaseName’, Versions ) //创建数据库
window.indexedDB.deleteDatabase(‘DatabaseName’) //删除数据库

Web SQL

类似MySQL这中关系型数据库。
规范未得到维护,最后的更新时间是2010年，已经舍弃了Web SQL database草案，大概率以后不会成为标准。