html5几种在客户端存储数据的实例详解-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

html5几种在客户端存储数据的实例详解

1.Application Cache

HTML5引入应用缓存，意味着web应用可以进行缓存，即使在没有网络的情况下也能使用。

application cache有三个特点

离线浏览

已缓存的资源加载速度更快

减少服务器负载，浏览器将只从服务器下载更新过或更改过的资源

使用方法就是在 html标签中添加一个manifest属性

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

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

<!DOCTYPE HTML><html manifest="demo.appcache"><body>   The content of the document......</body></html>

登录后复制

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

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

一个完整的manifest文件

CACHE MANIFEST  # 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/ /404.html

登录后复制2.localStorage & sessionStorage

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

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

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

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

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用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

3.indexDB

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

它的特点包括：

一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。

一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特点)

IndexedDB中，几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录，返回一个request，在request的result中得到查询结果。又比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。

indexedDB需要放到web服务器上才可以运行。

以上就是html5几种在客户端存储数据的实例详解的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~