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.js

NETWORK:
login.asp

FALLBACK:
/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服务器上才可以运行。

indexDB参考资料:

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

文档地址

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

时间: 2024-08-02 09:05:22

HTML5的两种简单的存储方式的相关文章

JavaScript两种数据类型的存储方式

JavaScript中数据类型的存储 区别: 两种类型的区别是:存储位置不同 基本数据类型 原始数据类型是直接存储在栈(stack)中的简单数据段.因为占据空间小.大小固定,属于被频繁使用数据,所以放入栈中存储. 引用数据类型 引用数据类型存储在堆(heap)中的对象,占据空间大.大小不固定.如果存储在栈中,将会影响程序运行的性能. JavaScript中的引用数据类型有: Array Object 引用数据类型是保存在堆内存中的,然后再栈内存中保存一个对堆内存中实际对象的引用(栈内存中保存了一

SQL两种简单分页查询方式

以前我们或许都用过了linq的skip and take方式进行分页查询,但是很少自己写sql的分页查询,因为大多数时候,我们都是在调用别人的方法. 最近看到一个文档,感觉方法里面实现的分页查询进入数据库调用的时候,实际最底层调用的还是SQL的分页查询,例如,我们用linq写个分页查询,转成sql表达式后发现: 实际调用的时候,才发现SQL底层是这样进行分页的. 下面,本文主要是介绍两种SQL的分页查询. 一,TOP方式 ----第一种分页查询方式:TOP方式 declare @page int

栅格布局的两种简单的实现方式

使用float: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> section { border: solid 1px; } section section { float: left

java 程序执行输出有两种简单方式

java 程序执行输出有两种简单方式: 1. System.out.println("需要输出的内容"): 该方法可参看运行一个简单的Java程序 结果图: 2. System.out.print("需要输出的内容"): 1 public class HelloWorld 2 { 3 //Java程序的入口方法,程序将从这里开始运行 4 public static void main(String[] args) 5 { 6 //向控制台打印一条语句 7 Syste

HTML5的五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html HTM

SFS Store 一种简单应用存储架构

SFS Store 一种简单应用存储架构html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.6}body{-webkit-touch-callout:none;font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft

Adnroid 两种下拉刷新 方式的实现 sina刷新 gmail刷新

sina刷新 这种下拉刷新的方式是比较简单的.上个图: 这种刷新方式的思路是这样的: 首先是需要一个HeaderVIew也就是刷新时头部所显示出来的数据.这个view的布局随你,长啥样自己定夺. 其他不是特别重要,重要的是用户触摸事件的捕捉,看到github上的大神的一些方法是比较正规的,我就自己用自己的方法尝试,主要是捕捉到用户的点击事件来计算用户所触摸到的位置然后来更新头部布局的位置. 这个重要的代码贴出来: case MotionEvent.ACTION_MOVE: currentY =

转:Selenium2.0介绍——WebDriver两种驱动浏览器的方式

如果之前熟悉Selenium RC,理解了Selenium RC是如何工作的,那么,当第一次接触Selenium WebDriver的时候,看到WebDriver居然可以不需要指定远端服务器的IP地址和端口号的,一定会惊讶的. 事实上,WebDriver有两种方式“驱动”浏览器的方式.1. Selenium Server:和Selenium RC一样的,通过指定远端服务器IP地址和端口号,由这个远端服务器来驱动浏览器.2. 直接调用:无须指定任何服务器IP地址和端口号.直接使用本地的浏览器(只要

Html5 Web的5中离线存储方式之localStorage

Html5 Web的5中离线存储方式之localStorage 在HTML5越来越流行的今天,如果你还不知道离线存储,那就说明你落后了很多. HTML5的离线存储方式有多种:Web SQL Database.LocalStorage.Cookie.WebStorage.IndexedDB.FileSystem. Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展.我就不多说了. 今天我们主要看LocalStorage这种最简单的