JavaScript中离线应用和客户端存储(cookies、sessionStorage、localStorage)
一、离线应用
所谓离线web应用,就是在设备不能上网的情况下仍然可以运行的应用。
开发离线web应用需要几个步骤:首先,确保应用知道设备是否能上网,以便下一步执行正确的操作;然后,应用还必须能访问一定的资源(图像、JavaScript、css等),只有这样才能正常工作;最后,必须有一块本地空间用于保存数据,无论能否上网都不妨碍读写。
1、离线检测
HTML5定义一个navigator.onLine属性,这个属性值为true表示设备能上网,值为false表示设备离线。
除了navigator.onLine属性之外,HTML5还定义了两个事件:online和offline。当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。
为了检测应用是否离线,在页面加载后,最好先通过navigator.onLine取得初始的状态。然后,就是通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时,navigator.onLine属性的值也会改变,不过必须手工轮询这个属性才能检测到网络状态的变化。
2、应用缓存
HTML5的应用缓存,或者简称为appcache,是专门为开发离线Web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。
二、数据存储
1、cookie
是在客户端用于存储会话信息的。该标准要求服务器对任意http请求发送Set-Cookie Http头作为响应头的一部分,其中包括会话信息。
(1)限制
cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后,再创建它的域名发送请求时,都会包含这个cookie。
由于cookie是存在客户端计算机上的,还加入了一些限制确保cookie不会被恶意使用,同时不会占用太多磁盘空间。
1、IE6以及更低版本限制每个域名最多20个cookie
2、IE7和之后版本每个域名最多50个。
3、Firefox限制每个域最多50个cookie。
4、Opera限制每个域最多30个cookie。
5、Safari和Chrome对于每个域的cookie数量限制没有硬性规定。
浏览器中对于cookie的尺寸也有限制。大多数浏览器都有大约4096B(加减1)的长度限制。为了最佳的浏览器兼容性,最好将整个cookie长度限制在4095B(含4095)
以内。
2、IE用户数据
在IE5.0中,微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多128KB数据,每个域名最多1MB数据。
<div style="behavior:url(#default#userData)" id="dataStore"></div> var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("name","xiaolu");
dataStore.setAttribute("book","javaScript");
dataStore.save("BookInfo"); 在这段代码中,<div>元素上存入了两部分信息。在用setAttribute()存储数据之后,调用了save()方法,指定了数据空间的名称为BookInfo。下一次页面载入之后,可以使用load()方法指定同样的数据空间名称来获取数据; dataStore.load("BookInfo"); alert(dataStore.getAttribute("name")); //xiaolu
alert(dataStore.getAttribute("book")); //javaScript
可以通过removeAttribute()方法明确指定要删除某元素数据,只要指定属性名称。删除之后,必须要再次调用save()来提交更改。
dataStore.removeAttribute("name","xiaolu");
dataStore.removeAttribute("book","javaScript");
dataStore.save("BookInfo");
对IE用户数据的访问限制和对cookie的限制类似。要访问某个数据空间,脚本运行的页面必须来自同一个域名,在同一个路径下,并使用与进行存储的脚本同样的协议。
和cookie不同的是,你无法将用户数据访问限制扩展到更多的客户。还有一点不同,用户数据默认是可以跨越会话持久存在的,同时也不会过期;数据需要通过removeAttribute()方法专门进行删除以释放空间。
cookie和IE用户数据并非安全,所以不能存放敏感信息。
三、Web存储机制
1、sessionStorage对象
sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。
2、localStorage对象
要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
限制:对于localStorage而言,大多数桌面浏览器会设置每个来源5MB的限制,Chrome和Safari对每个来源的限制是2.5MB。而iOS版的Safari和Android版的webkit的限制也是2.5MB
对sessionStorage的贤惠也是因浏览器而异。有的浏览器对sessionStorage的大小没有限制,但Chrome、Safari、iOS版Safari和Android版Webkit都有限制,也就是2.5MB。IE8+和Opera对sessionStorage的限制是5MB。
3.indexedDB
是在浏览器中保存结构化数据的一种数据库。最大特色是使用对象保存数据,而不是使用表来保存数据。
Web storage 和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie是不可或缺的Lcookie的作用是和服务器进行交互,作为HTTP规范的一部分而存在,而Web Storage仅仅是为了在本地“存储”数据而生。
浏览器的支持处理IE7及以下不支持外,其他标准浏览器都完全支持,值得一提的是,IE7、IE6中的userData其实就是JavaScript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持Web Storage
localStorage和sessionStorage都具有相同的操作方法,例如setItem,getItem,removeItem等。
JavaScript中离线应用和客户端存储(cookies、sessionStorage、localStorage)的更多相关文章
- 【JavaScript】离线应用与客户端存储
一.前言 这章非常重要,由于之后需要负责平台手机APP的日后维护,如何让用户在离线状态下正常使用,以及联网后的数据合并变得非常重要. 二.内容 离线检测 navigator ...
- js-新兴的API,最佳实践,离线应用于客户端存储
离线应用于客户端存储: 1.离线检测:online以及offline事件,都是在window对象上触发 navigator.online为true的时候是表示设备能够上网 2.使用一个描述文件(man ...
- 《javascript高级程序设计》 第23章 离线应用与客户端存储
23.1 离线检测23.2 应用缓存23.3 数据存储 23.3.1 Cookie 23.3.2 IE 用户数据 23.3.3 Web 存储机制 23.3.4 IndexedDB 23.1 离线检 ...
- 离线应用与客户端存储(cookie storage indexedDB)
离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...
- javascript的本地存储 cookies、localStorage
一.cookies 本地存储 首先是常用的cookies方法,网上有很多相关的代码以及w3cSchool cookies. // 存储cookies function setCookie(name,v ...
- JavaScript中利用Ajax 实现客户端与服务器端通信(九)
一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用X ...
- Web存储机制—sessionStorage,localStorage使用方法
Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 W ...
- cookies,sessionstorage,localstorage的区别?
请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...
- 通俗理解cookies,sessionStorage,localStorage的区别
sessionStorage .localStorage 和 cookie 之间的区别共同点:都是保存在浏览器端,且同源的. 区别:cookie数据始终在同源的http请求中携带(即使不需要),即co ...
随机推荐
- Python递归和迭代
递归 在函数内部,调用函数自身的编程技巧称为递归( recursion).递归函数结构清晰,很直观的理解计算过程,但也有严重缺点:相对于普通循环而言,递归运行效率较低,经过很多冗余的计算,递归会消耗大 ...
- 网站如何从http升级成https
基本概念: HTTP: 是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准,用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. HT ...
- FACVSPOW - Factorial vs Power 数学方法 + 二分
http://www.spoj.com/problems/FACVSPOW/ 求解n! > a^n最小的整数n 对于有n!和a^n的东西,一般是取ln 然后就是求解 (ln(1) + ln(2) ...
- memcache的分布式配置
public static class MemcacheHelper { private static MemcachedClient mc; static MemcacheHelper() { St ...
- 序列化shelve模块
1.shelve对pickle进行封装,所以shelve也只能在python里使用. shelve可以进行多次dump而且顺序不会乱. import shelve f = shelve.open('s ...
- Java&Xml教程(九)Java中通过XSD校验XML合法性
Java XML校验API能够通过XSD(XML Schema Definition)校验XML文件内容的合法性.在下面的案例中使用javax.xml.validation.Validator 类通过 ...
- ios---setContentOffset
UIView * farmeView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self. ...
- innerHTML引起IE的内存泄漏
内存泄漏常见的原因有三种: 1. 闭包 2. 未解除事件绑定 3. 循环引用DOM元素 除此之外,还有一种泄漏原因少有人知,它和innerHTML有关,不过很容易解决. 出现这种内存泄漏需要有三个 ...
- Oracle AWR报告的生成
生成AWR报告需要dbms_workload_repository包的权限. 一.以oracle用户登录到数据库服务器 二.进入SQLPLUS 三.执行脚本 @?/rdbms/admin/awrrpt ...
- ubuntu系统apache日志文件的位置
Debian,Ubuntu或Linux Mint上的Apache错误日志位置 默认的错误日志 在基于Debian的Linux上,系统范围的Apache错误日志默认位置是/var/log/apache2 ...