html5中存储方式的示例分析

　　介绍

这篇文章给大家分享的是有关html5中存储方式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>总体情况

编辑之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4 k之内。主域污染。

主要应用:购物车,客户登录

对于IE浏览器有用户数据,大小是64 k,只有IE浏览器支持。

<强>目标

<李>

解决4 k的大小问题

<李>

解决请求头常带存储信息的问题

<李>

解决关系型存储的问题

<李>

跨浏览器

<强> 1。本地存储localstorage

<强>存储方式:

以键值对(键值)的方式存储,永久存储,永不失效,除非手动删除。

<强>大小:

每个域名5 m

<强>支持情况:

html5中存储方式的示例分析

注意:IE9 localstorage不支持本地文件,需要将项目署到服务器,才可以支持!

<>强检测方法:

如果(window.localStorage) { 　　,警报(& # 39;却;能够browser  supports  localstorage # 39;); 　　其他}{ 　　,警报(& # 39;却;能够browser  does  NOT  support  localstorage # 39;); 　　}

<强>常用的API:

getItem//取记录

setIten//设置记录

removeItem//移除记录

键//取键所对应的值

清楚//清除记录

html5中存储方式的示例分析

<强>存储的内容:

数组,图片,json,样式,脚本…(只要是能序列化成字符串的内容都可以存储)

<强> 2。本地存储sessionstorage

HTML5的本地存储API中的localStorage sessionstorage与在使用方法上是相同的,区别在sessionstorage于在关闭页面后即被清空,而localStorage则会一直保存。

<强> 3。离线缓存(应用程序缓存)

本地缓存应用所需的文件

<强>使用方法:

①配置清单文件

页面上:

& lt; ! DOCTYPE  HTML> 　　& lt; html  manifest=癲emo.appcache"祝辞 　　… 　　& lt;/html>

<强>清单文件:

清单文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

清单文件可分为三个部分:

①缓存清单——在此标题下列出的文件将在首次下载后进行缓存

②网络——在此标题下列出的文件需要与服务器的连接,且不会被缓存

③后退——在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

<强>完整演示:

CACHE 清单 　　#,2016 - 07 - 24 v1.0.0/theme.css/main.js 　　网络: 　　login.jsp 　　, 　　回退:/html/,/离线。html

<>强服务器上:清单文件需要配置正确的mime类型,即“文字/cache-manifest"。

如Tomcat:

& lt; mime-mapping> 　　,,,,& lt; extension> manifest 　　,,,,& lt; mime-type>文本/cache-manifest 　　& lt;/mime-mapping>

<强>常用API:

核心是applicationCache对象,有个状态属性,表示应用缓存的当前状态:

0(未):,无缓存,即没有与页面相关的应用缓存

1(空闲):闲置,即应用缓存未得到更新

2(检查):检查中,即正在下载描述文件并检查更新

3(下载):下载中,即应用缓存正在下载描述文件中指定的资源

4 (UPDATEREADY):更新完成,所有资源都已下载完毕

5(空闲):,废弃,即应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

<强>相关的事件:

表示应用缓存状态的改变:

检查:在浏览器为应用缓存查找更新时触发

错误:在检查更新或下载资源期间发送错误时触发

noupdate:在检查描述文件发现文件无变化时触发

下载:在开始下载应用缓存资源时触发

进步:在文件下载应用缓存的过程中持续不断地下载地触发

UPDATEREADY:在页面新的应用缓存下载完毕触发

缓存:在应用缓存完整可用时触发

<强>应用程序缓存的三个优势:

①离线浏览

②提升页面载入速度

③降低服务器压力

注意事项:

1。浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5 mb)

html5中存储方式的示例分析