html5 的存储

html5提供了很多存储的功能,诸如localStorage,sessionStorage,indexedDB,还有离线缓存等,本次主要介绍离线缓存跟本地存储。

离线缓存

 使用离线存储可以缓存部分文件在本地,当网络断开的时候还可以照常使用,这个需要一个配置文件,一般这么写:

< html manifest="test.manifest">

  然后你需要在你的文件test.manifest文件里面定义那些内容是需要缓存的,那些是不可以缓存的,(以下代码是从http://www.cnblogs.com/xqhppt/p/4157862.html copy的)

 1 CACHE MANIFEST
 2 #上面一句必须
 3 #v1.0.0
 4 #需要缓存的文件
 5 CACHE:
 6 a.js
 7 b.css
 8 #不需要缓存的文件
 9 NETWORK:
10 *
11 #无法访问页面
12 FALLBACK:
13 404.html

值得一提的是缓存的文件是不能使用通配符的,必须一个一个的写出来,然后就可以尝试拔网线了,哈哈。

locastrage

这个大家应该用的比较多了,其实很简单,主要就是getItem,setItem,clear等方法,值得一提的事在同源的页面下,locastrage是共享的,同时有一个叫onstorage的事件,额,这个ie跟其他浏览器有点区别,因为ie的这个事件是在document上的,其他的浏览器在windows上面,看个例子:

1  window.onstorage=function(e){
2         console.log(e.key+"-"+ e.newValue+ "-"+e.oldValue)
3 }

然后,我同时打开两个页面,在其中一个页面上直接设置一个新的key叫testNewKey,于是我打印出如下结果:

testNewKey-testNewKey-new-null

我在修改他的值,得到如下结果:

testNewKey-testNewKey-new2-testNewKey-new

哈哈,这个东西可以做同源页面不同窗口的通讯使用,目前项目中尚未用到,不过确实很棒的东西,这个比postmessage好玩一点(postmessage支持自己内部的iframe,自己打开的页面,打开自己的页面,用一个自称萝卜的人的说法,自己的孩子,自己的爹,还有肚子里的孩子可以使用postmessage,onstrorage可以支持兄弟的),至于getItem,setItem,removeItem之类的不想在此博客重复了,这个太基本了,就键值对保存。

最后,值得一提的就是localStorage是有容量限制的,有的浏览器是10M,有的是5M(针对同一个域名,即一个源),这个可以通过try-catch语句去检测是不是已经满了,满了再去存储会报错,这个报错可以catch到的,不过一般的应用很难用完吧,10M的字符串,基本不会用完的。

时间: 2024-10-04 00:54:46

html5 的存储的相关文章

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌入式设备上,熟悉IOS/Android开发的同学,应该对SQLite数据库比较熟悉. HTML5中的数据库操作比较简单,主要有如下两个函数: 1.通过openDatabase

利用HTML5开发Android(4)---HTML5本地存储之Web Storage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管

【html5】html5离线存储

html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据,是我们的网站的适应性和应用型更强 2.准备工作 1.服务器配置 1.需要在 apache配置文件加:① AddType text/cache-manifest .manifest 2.创建缓存清单文件xxx.manifes

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

HTML5数据存储

介绍两种对象使用方法: sessionStorage方法如果关闭了浏览器,这个保存的数据就丢失. 1.sessionStorage 保存数据:sessionStorage.setItem(key,value); 读取数据:sessionStorage.getItem(key); localStorage则是浏览器被关闭,下次在打开浏览器浏览这个页面点击读取数据时任然能读取到保存的数据. 注*这个数据是区分浏览器的,在别的浏览器中是读取不到这个浏览器保存的数据的. 2.localStorage 保

HTML5 离线存储应用案例

HTML5 所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新.删除离线存储等操作: 下面简单来使用一下离线存储:  第一:要在 apche 服务器的 httpd.conf文件中添加下面这段话 AddType text/cache-manifest .manifest 第二:建一个 1.manifest 文件, 然后这里的清单是 #下面这句话必须存在,而且必须放在

我的项目9 网页之间传值二 HTML5本地存储

在我的项目1中写到过网页之间传值,但是那种方式在andriod4.0和以下版本就传不过去了,于是乎,就打起了HTML5本地存储的注意.大家看一下代码就知道什么意思了: 发送数据页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript">

吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】

吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥抱HTML5.但WeX5小编编也发现,依然有相当一部分从业者,仍然对HTML5将信将疑,仍对原生App技术恋恋不舍.小编编特意转发分享下文,HTML5技术崛起,从离线存储技术是可见一斑的. (正文)随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些Hybrid Ap

HTML5 Web存储(Web Storage)技术及用法

在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣,它就是Web存储(Web Storage).Web存储(Web Storage)提供了一个在浏览器端保存用户会话信息的方法.下面让我们来看一看Web存储(Web Storage)的基本用法! Web存储(Web Storage)基本要领 存储的数据可以是任何类JSON的结构化数据. 存储的数据不会

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一