HTML5的两种简单的存储方式

时间 2019-11-21

标签 html5 html 两种简单存储方式栏目 HTML5 繁體版

原文原文链接

1.Application Cache

HTML5引入应用缓存，意味着web应用能够进行缓存，即便在没有网络的状况下也能使用。css

application cache有三个特色html

每一个指定了 manifest 的页面在用户对其访问时都会被缓存。若是未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。html5

manifest 文件的建议的文件扩展名是：".appcache"。web

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。sql

manifest 文件可分为三个部分：数据库

一个完整的manifest文件浏览器

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

HTML5 提供了两种在客户端存储数据的新方法：缓存

以前，这些都是由 cookie 完成的。可是 cookie 不适合大量数据的存储，由于它们由每一个对服务器的请求来传递，这使得 cookie 速度很慢并且效率也不高。服务器

localStorage和sessionStorage都具备相同的操做方法，例如setItem()、getItem()和removeItem()等
localStorage和sessionStorage的方法：cookie

setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

removeItem删除key
用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

clear清除全部的key/value
用途：清除全部的key/value
用法：.clear()

sessionStorage不是一种持久化存储，浏览器关闭以后会随之清除。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

indexDB是一种轻量级NOSQL数据库。相比web sql(sqlite)更加高效，包括索引、事务处理和健壮的查询功能。

它的特色包括：

一个网站可能有一个或多个 IndexedDB 数据库，每一个数据库必须具备唯一的名称。
一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称唯一标识）是一个记录集合。每一个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成唯一的连续正整数。键路径定义了键值的路径。它能够是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特色)
IndexedDB中，几乎全部的操做都是采用了command->request->result的方式。好比查询一条记录，返回一个request，在request的result中获得查询结果。又好比打开数据库，返回一个request，在request的result中获得返回的数据库引用。
indexedDB须要放到web服务器上才能够运行。

indexDB参考资料：

http://www.myexception.cn/nosql/1973758.html

文档地址

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API