html5 的本地存储的五种方案介绍【百科全说】

HTML5 本地存储就是一种让网页可以把键值对存储在用户浏览器客户端的方法。像Cookie一样，这些数据不会因为你打开新网站，刷新页面，乃至关闭你的浏览器而消失。而与Cookie不同的时，这些数据不会每次随着HTTP请求被发送到服务器端(当然如果你需要这么做，你可以自己编程实现）. 因为这是HTML5规范的一部分，这一接口会被浏览器原生支持，不用依赖任何第三方插件。

操作方法

01

LocalStorage就是Key-Value的简单键值对存储结构，Web Storage除了localStorage的持久性存储外，还有针对本次回话的sessionStorage方式，一般情况下localStorage较为常用，示例代码如下：
02

Cookie这种存储方式存储内容很有限，而且不适合大量数据的存储，因为它们都会随每个对服务器的请求，附加传递到服务器，这使得加载速度很慢而且效率也不高。，在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。示例代码如下：
03

Indexed Database API可以存储结构对象，可构建key和index的索引方式查找，目前各浏览器的已经逐渐支持IndexedDB的存储方式，其使用代码如下，需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式，特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式，因此和NodeJS一样使用上不如同步的代码容易。示例代码如下：
04

FileSystem API相当于操作本地文件的存储方式，目前支持浏览器不多，其接口标准也在发展制定变化中，因此也可以动态生成图片到本地文件，然后通过 filesystem:http:*** 的URL方式直接赋值给img的html元素的src访问。示例代码如下：
05

window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态，示例代码如下：
06

以上存储方式都可以用快捷键F12打开console看到被缓存的数据：

html5 的本地存储的五种方案介绍

操作方法

相关推荐