本节是第四讲的第二十四小节，上一节课为大家介绍了JavaScript多媒体播放控制器的开发包括音频和视频，本节将为大家介绍客户端数据存储包括Web Strorage ，IndexDB和Cache API。

客户端存储（Client-side storage）

现代web浏览器提供了很多在用户电脑web客户端存放数据的方法 — 只要用户的允许 — 可以在它需要的时候被重新获得。这样能让你存留的数据长时间保存, 保存站点和文档在离线情况下使用, 保留你对其站点的个性化配置等等。

大多数现代的web站点是动态的— 它们在服务端使用各种类型的数据库来存储数据(服务端存储), 之后通过运行服务端（ server-side） 代码来重新获取需要的数据，把其数据插入到静态页面的模板中，并且生成出HTML渲染到用户浏览上。

客户端存储以相同的原理工作，但是在使用上有一些不同。它是由 JavaScript APIs 组成的因此允许你在客户端存储数据 (比如在用户的机器上)，而且可以在需要的时候重新取得需要的数据。这有很多明显的用处，比如：

个性化网站偏好（比如显示一个用户选择的窗口小部件，颜色主题，或者字体）。

保存之前的站点行为 (比如从先前的session中获取购物车中的内容， 记住用户是否之前已经登陆过)。

本地化保存数据和静态资源可以使一个站点更快（至少让资源变少）的下载， 甚至可以在网络失去链接的时候变得暂时可用。

保存web已经生产的文档可以在离线状态下访问。

通常客户端和服务端存储是结合在一起使用的。例如，你可以从数据库中下载一个由网络游戏或音乐播放器应用程序使用的音乐文件，将它们存储在客户端数据库中，并按需要播放它们。用户只需下载音乐文件一次——在随后的访问中，它们将从数据库中检索。

Note：使用客户端存储 API 可以存储的数据量是有限的（可能是每个API单独的和累积的总量）;具体的数量限制取决于浏览器，也可能基于用户设置。

传统方法：cookies

客户端存储的概念已经存在很长一段时间了。从早期的网络时代开始，网站就使用 cookies 来存储信息，以在网站上提供个性化的用户体验。它们是网络上最早最常用的客户端存储形式。因为在那个年代，有许多问题——无论是从技术上的还是用户体验的角度——都是困扰着 cookies 的问题。毕竟它过时、存在各种安全问题，而且无法存储复杂数据，而且有更好的、更现代的方法可以在用户的计算机上存储种类更广泛的数据。

cookie的唯一优势是它们得到了非常旧的浏览器的支持，所以如果您的项目需要支持已经过时的浏览器（比如 Internet Explorer 8 或更早的浏览器），cookie可能仍然有用，但是对于大多数项目（很明显不包括本站）来说，您不需要再使用它们了。

新流派：Web Storage 和 IndexedDB

现代浏览器有比使用 cookies 更简单、更有效的存储客户端数据的 API。

Web Storage API 提供了一种非常简单的语法，用于存储和检索较小的、由名称和相应值组成的数据项。当您只需要存储一些简单的数据时，比如用户的名字，用户是否登录，屏幕背景使用了什么颜色等等，这是非常有用的。

IndexedDB API 为浏览器提供了一个完整的数据库系统来存储复杂的数据。这可以用于存储从完整的用户记录到甚至是复杂的数据类型，如音频或视频文件。

未来：Cache API

一些现代浏览器支持新的 Cache API。这个API是为存储特定HTTP请求的响应文件而设计的，它对于像存储离线网站文件这样的事情非常有用，这样网站就可以在没有网络连接的情况下使用。缓存通常与 Service Worker API 组合使用，尽管不一定非要这么做。

存储简单数据 — web storage

Web Storage API 非常容易使用 — 你只需存储简单的 键名/键值 对数据 (限制为字符串、数字等类型) 并在需要的时候检索其值。

你所有的 web storage 数据都包含在浏览器内两个类似于对象的结构中： sessionStorage 和 localStorage。 第一种方法，只要浏览器开着，数据就会一直保存 (关闭浏览器时数据会丢失) ，而第二种会一直保存数据，甚至到浏览器关闭又开启后也是这样。我们将在本文中使用第二种方法，因为它通常更有用。

Storage.setItem() 方法允许您在存储中保存一个数据项——它接受两个参数：数据项的名字及其值。

Storage.getItem() 方法接受一个参数——你想要检索的数据项的名称——并返回数据项的值。

Storage.removeItem() 方法接受一个参数——你想要删除的数据项的名称——并从 web storage 中删除该数据项。

localStorage.setItem('name','Chris');

var myName = localStorage.getItem('name');

console.log(myName);

localStorage.removeItem('name');

console.log(myName);

web storage 的一个关键特性是，数据在不同页面加载时都存在（甚至是当浏览器关闭后，对localStorage的而言）。

每个域都有一个单独的数据存储区(每个单独的网址都在浏览器中加载)。你会看到，如果你加载两个网站（例如google.com和amazon.com）并尝试将某个项目存储在一个网站上，该数据项将无法从另一个网站获取。这是有道理的 - 你可以想象如果网站能够查看彼此的数据，就会出现安全问题！

存储复杂数据 — IndexedDB

IndexedDB API（有时简称 IDB ）是可以在浏览器中访问的一个完整的数据库系统，在这里，你可以存储复杂的关系数据。其种类不限于像字符串和数字这样的简单值。你可以在一个IndexedDB中存储视频，图像和许多其他的内容。

let db;

let request = window.indexedDB.open('notes', 1);

创建一个 request 变量，目的是打开 notes数据库的 1版本。如果notes数据库不存在，则后续代码将为您创建。您将在IndexedDB中经常看到此请求模式。数据库操作需要时间。您不希望在等待结果时挂起浏览器，因此数据库操作是异步的，这意味着它们不会立即发生，而是在将来的某个时刻发生，并且在完成后会收到通知。

db = request.result;//接口的result 只读属性IDBRequest返回请求的结果。

let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });

// Define what data items the objectStore will contain

objectStore.createIndex('title', 'title', { unique: false });

objectStore.createIndex('body', 'body', { unique: false });

IDBDatabase.createObjectStore()，我们使用在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们给它起了名称注释，并且还指定了一个autoIncrement名为的关键字段id- 在每个新记录中，这将自动赋予增量值 - 开发人员不需要明确地设置它。作为密钥，该id字段将用于唯一标识记录，例如删除或显示记录时。

我们还使用以下IDBObjectStore.createIndex()方法创建另外两个索引（字段）:( title每个字段将包含一个标题），以及body（包含字段的正文）。

存储数据

let newItem = { title: titleInput.value, body: bodyInput.value };//将表单字段的值转换为对象

let transaction = db.transaction(['notes'], 'readwrite');//打开一个读写的数据库事务

let objectStore = transaction.objectStore('notes');//打开notes的数据库事物对象

var request = objectStore.add(newItem);//创建了一个请求对象，调用事物对象的add方法添加记录

显示数据

let objectStore = db.transaction('notes').objectStore('notes');//打开notes事物的数据库对象

let cursor =objectStore .result;//返回事物对象的结果

if(cursor) {

title.textContent = cursor.value.title;

body.textContent = cursor.value.body;

}

删除数据

let noteId = Number(Node.getAttribute('data-note-id'));//获取数据的ID值

let transaction = db.transaction(['notes'], 'readwrite');//打开一个读写的数据库事务

let objectStore = transaction.objectStore('notes');//打开notes的数据库事物对象

let request = objectStore.delete(noteId);//删除该记录

离线文件存储

每次访问网站时仍然需要下载主要的HTML，CSS和JavaScript文件，这意味着当没有网络连接时，它将无法工作。这就是服务工作者(service worker)和密切相关的Cache API的用武之地。

服务工作者是一个JavaScript文件，简单地说，它是在浏览器访问时针对特定来源（网站或某个域的网站的一部分）进行注册的。注册后，它可以控制该来源的可用页面。它通过坐在加载的页面和网络之间以及拦截针对该来源的网络请求来实现这一点。

当它拦截一个请求时，它可以做任何你想做的事情，但经典的例子是离线保存网络响应，然后提供响应请求而不是来自网络的响应。实际上，它允许您使网站完全脱机工作。

Cache API是另一种客户端存储机制，略有不同 - 它旨在保存HTTP响应，因此与服务工作者一起工作得非常好。

注册服务工作者

if('serviceWorker' in navigator) {

navigator.serviceWorker

.register('/caches/sw.js')

.then(function() { console.log('Service Worker Registered'); });

}

使用该ServiceWorkerContainer.register()方法将sw.js文件中包含的服务工作者注册到它所驻留的源，因此它可以控制与它或子目录相同的目录中的页面。当其承诺履行时，服务人员被视为已注册。

安装 service worker

self.addEventListener('install', function(e) {

e.waitUntil(

caches.open('data-store').then(function(cache) {

return cache.addAll([

'/caches/',

'/caches/index.html',

'/caches/index.js',

]); }) );});

self关键字是一种从服务工作文件内部引用服务工作者的全局范围的方法。在install 处理程序内部， 我们使用ExtendableEvent.waitUntil()事件对象上可用的方法来表示浏览器不应该完成服务工作者的安装，直到其中的promise成功完成。我们在运行中看到Cache API的地方。我们使用该CacheStorage.open()方法打开一个可以存储响应的新缓存对象（类似于IndexedDB对象存储）。此承诺通过Cache表示video-store缓存的对象来实现。然后，我们使用该Cache.addAll()方法获取一系列资产并将其响应添加到缓存中。

响应未来的请求

self.addEventListener('fetch', function(e) {

console.log(e.request.url);

e.respondWith(

caches.match(e.request).then(function(response) {

return response || fetch(e.request);

})

);});

我们向服务工作者全局范围添加另一个侦听器，该范围在fetch引发事件时运行处理函数。只要浏览器在服务工作者注册的目录中请求资产，就会发生这种情况。

在处理程序内部，我们首先记录所请求资产的URL。然后，我们使用该FetchEvent.respondWith()方法为请求提供自定义响应。

在这个块中，我们CacheStorage.match()用来检查是否可以在任何缓存中找到匹配的请求（即匹配URL）。如果未找到匹配，或者undefined如果未找到匹配，则此承诺将满足匹配的响应。

如果找到匹配项，我们只需将其作为自定义响应返回。如果没有，我们从网络中获取（）响应并返回该响应。

关于客户端存储实例的代码讲解请参照视频课程，以上内容部分摘自视频课程04网页游戏编程JavaScript-24客户端存储，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。