存储

离线存储

所谓离线Web 应用，就是在设备不能上网的情况下仍然可以运行的应用。HTML5 把离线应用作为重点，主要是基于开发人员的心愿。前端开发人员一直希望Web 应用能够与传统的客户端应用同场竞技，起码做到只要设备有电就能使用。

应用缓存（application cache）

1. 新建一个app.manifest文件
2. 文件内容:
    CACHE MANIFEST
    #Comment
    file.js
    file.css
3. 放入html中，<html>中的manifest 属性中指定这个文件的路径，<html manifest="/offline.manifest">

数据存储

随着Web 应用程序的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。想法很
合乎逻辑，属于某个特定用户的信息应该存在该用户的机器上。无论是登录信息、偏好设定或其他数据，
Web 应用提供者发现他们在找各种方式将数据存在客户端上。

（1）cookie
HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储会话信息的。该标准要求服务器对任意HTTP 请求发送Set-Cookie HTTP 头作为响应的一部分，其中包含会话信息。

限制：
1. cookie 在性质上是绑定在特定的域名下的。当设定了一个cookie 后，再给创建它的域名发送请求时，
都会包含这个cookie。这个限制确保了储存在cookie 中的信息只能让批准的接受者访问，而无法被其他
域访问。
2. 每个域的cookie 总数是有限的。浏览器中对于cookie 的尺寸也有限制。

构成：
1. 名称：一个唯一确定cookie 的名称。cookie 名称是不区分大小写的，所以myCookie 和MyCookie
被认为是同一个cookie。
2. 值：储存在cookie 中的字符串值。值必须被URL 编码。
3. 域：：cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie 信息。这个值
可以包含子域（subdomain，如www.wrox.com），也可以不包含它（如.wrox.com，则对于wrox.com
的所有子域都有效）。如果没有明确设定，那么这个域会被认作来自设置cookie 的那个域。
4. 路径：对于指定域中的那个路径，应该向服务器发送cookie。
5. 失效时间：表示cookie 何时应该被删除的时间戳（也就是，何时应该停止向服务器发送这个
cookie）。默认情况下，浏览器会话结束时即将所有cookie 删除；
5. 安全标志secure：指定后，cookie 只有在使用SSL 连接的时候才发送到服务器

Js中cookie
1. document.cookie：返回当前页面可用的（根据cookie 的域、路径、失效时间和安全设置）所有cookie
的字符串，一系列由分号隔开的名值对儿。所有名字和值都是经过URL 编码的，所以必须使用decodeURIComponent()来解码。
2. 设置document.cookie 并不会覆盖cookie，除非设置cookie名字已经存在。
3. 格式如下：name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure，这些参数中，只有cookie 的名字和值是必需的

子cookie
1. 为了绕开浏览器的单域名下的cookie 数限制，一些开发人员使用了一种称为子cookie。
2. 子cookie 是存放在单个cookie 中的更小段的数据:name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

(2) web存储机制

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

1. clear()：删除所有值
2. getItem(name)：根据指定的名字name 获取对应的值
3. key(index)：获得index 位置处的值的名字。
4. removeItem(name)：删除由name 指定的名值对儿。
5. setItem(name, value)：为指定的name 设置一个对应的值。

sessionStorage 对象：对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。
localStorage 对象：页面必须来自同一个域名（子域名无效），使用同一种
协议，在同一个端口上。

storage 事件：对Storage 对象进行任何修改，都会在文档上触发storage 事件。
属性：
1. domain：发生变化的存储空间的域名。
2. key：设置或者删除的键名。
3. newValue：如果是设置值，则是新值；如果是删除键，则是null。
4. oldValue：键被更改之前的值。

EventUtil.addHandler(document, "storage", function(event){
alert("Storage changed for " + event.domain);
});

IndexedDB

IndexedDB是在浏览器中保存结构化数据的一种数据库，IndexedDB 的思想是创建一套API，方便保存和读取JavaScript 对象，同时还支持查询及搜。
1. 异步执行，差不多每一次IndexedDB 操作，都需要你注册onerror 或onsuccess 事件处理程序，以确保适当地处理结果。

Js-cookie

A simple, lightweight JavaScript API for handling cookies

安装
（1）<script src="/path/to/js.cookie.js"></script>
（2）<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
（3）npm install js-cookie --save

使用：
1. 创建cookie： Cookies.set('name', 'value');
2. 创建具有生存时间7天的cookie：Cookies.set('name', 'value', { expires: 7 });
3. 有效路径cookie：Cookies.set('name', 'value', { expires: 7, path: '' });
读cookies：
1. 根据名字读： Cookies.get('name'); // => 'value'
2. 所有cookies：Cookies.get(); // => { name: 'value' }

删除：
1. Cookies.remove('name');重要！ 删除cookie并且您不依赖于默认属性时，必须传递用于设置cookie的完全相同的路径和域属性。

命名冲突：
1. var Cookies2 = Cookies.noConflict(); Cookies2.set('name', 'value');

JSON:
1. 创建cookie时，您可以传递数组或对象文字，而不是值中的字符串。Cookies.set('name', { foo: 'bar' });
2. Cookies.getJSON('name'); // => { foo: 'bar' }

expires删除时间:
Cookies.set('name', 'value', { expires: 365 });

path：
Cookies.set('name', 'value', { path: '' }); // 一个String，指示cookie可见的路径。

domain:
一个String，指示cookie应该可见的有效域。 cookie也将对所有子域可见。默认值：Cookie仅对创建cookie的页面的域或子域可见，Internet。
假设一个cookie在site.com：
Cookies.set('name', 'value', { domain: 'subdomain.site.com' });
Cookies.get('name'); // => undefined (need to read at 'subdomain.site.com')

secure安全：
Cookies.set('name', 'value', { secure: true });
Cookies.get('name'); // => 'value'
Cookies.remove('name');

读编译的代码：
document.cookie = 'escaped=%u5317';
document.cookie = 'default=%E5%8C%97';
var cookies = Cookies.withConverter(function (value, name) {
    if ( name === 'escaped' ) {
        return unescape(value);
    }
});
cookies.get('escaped'); // 北
cookies.get('default'); // 北
cookies.get(); // { escaped: '北', default: '北' }
写代码:
Cookies.withConverter({
    read: function (value, name) {
        // Read converter
    },
    write: function (value, name) {
        // Write converter
    }
});

浏览器缓存机制

强缓存：

Expires：是一个绝对时间，在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。 Expires: Thu, 10 Nov 2017 08:45:11 GMT

Cache-Control：该字段表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求，相对时间。具有以下几个选项：

max-age：即最大有效时间，在上面的例子中我们可以看到
no-cache：表示没有缓存，即告诉浏览器该资源并没有设置缓存
s-maxage：同max-age，但是仅用于共享缓存，如CDN缓存
public：多用户共享缓存，默认设置
private：不能够多用户共享，HTTP认证之后，字段会自动转换成private。

对比缓存：

先从缓存中获取对应的数据标识，然后向服务器发送请求，确认数据是否更新，如果更新，则返回新数据和新缓存；反之，则返回304状态码，告知客户端缓存未更新，可继续使用。
Last-Modified ：

在 http 1.0 版本中，第一次请求资源时服务器通过 Last-Modified 来设置响应头的缓存标识，并且把资源最后修改的时间作为值填入，然后将资源返回给浏览器。在第二次请求时，浏览器会首先带上 If-Modified-Since 请求头去访问服务器，服务器会将 If-Modified-Since 中携带的时间与资源修改的时间匹配，如果时间不一致，服务器会返回新的资源，并且将 Last-Modified 值更新，作为响应头返回给浏览器。如果时间一致，表示资源没有更新，服务器返回 304 状态码，浏览器拿到响应状态码后从本地缓存数据库中读取缓存资源。

Etag：

在 http 1.1 版本中，服务器通过 Etag 来设置响应头缓存标识。Etag 的值由服务端生成。在第一次请求时，服务器会将资源和 Etag 一并返回给浏览器，浏览器将两者缓存到本地缓存数据库。在第二次请求时，浏览器会将 Etag 信息放到 If-None-Match 请求头去访问服务器，服务器收到请求后，会将服务器中的文件标识与浏览器发来的标识进行对比，如果不相同，服务器返回更新的资源和新的 Etag ，如果相同，服务器返回 304 状态码，浏览器读取缓存。

posted @ 2019-02-18 10:10 lijia2019 阅读(374) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

NEUJIA

存储

离线存储

Js-cookie

浏览器缓存机制

强缓存：

对比缓存：

公告