• 离线检测

检测是否离线，html5为此定义了一个navigator.onLine属性，这个属性为true表示设备能上网，false表示离线，这个属性还有点兼容问题。因此单独使用这个属性不能确定网络是否连通，即便如此，在请求发生错误的情况，检测这个属性仍然是管用的。

Html5还定义了两个事件：online和offline，当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。

  • 应用缓存

Hmtl5的应用缓存是专门为开发离线web应用而设计的，Appcache就是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源：

CACHE MANIFEST

#Comment

file.js

file.css

要将描述文件与页面关联起来，可以在<html>中的manifest属性中指定这个文件路径。

虽然应用缓存的意图是确保离线时资源可用，但也有相应的JavaScript API 让你知道它在做什么。这个API的核心是applicationCache对象，这个对象有一个status属性，属性的值是常量，表示应用缓存的如下当前状态。

    1. 0：无缓存
    2. 1：闲置
    3. 2：检查中
    4. 3：下载中
    5. 4：更新完成
    6. 5：废弃

应用缓存还有很多相关的事件，表示其状态的改变

    1. checking:在浏览器为应用缓存查找更新时触发
    2. error：在检查更新或下载资源期间发生错误时触发
    3. noupdate：在检查描述文体发现文件无变化时触发
    4. downloading：在开始下载应用缓存资源时触发
    5. progress：在文件下载应用缓存的过程中持续不断地触发
    6. updateready：在页面新的应用缓存下载完毕可以通过swapcache使用时触发
    7. cached：在应用缓存完整可用时触发
  • 数据存储
  1. HTTP Cookie是在客户端用于存储会话信息的，该标准要求服务器对任意http请求发送Set-Cookie HTTP头作为响应的一部分，其中包括会话信息。
  2. 限制：cookie在性质上是绑定的域名下的，当设定了一个cookie后，再给创建它的域名发生请求时，都会包含中国cookie，这个限制确保了存储在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。
  3. Cookie的构造

Cookie由浏览器保存的以下几块信息构成：

名称：一个唯一确定cookie的名称。

值：存储在cookie中的字符串，

域：cookie对于哪个域是有效的

路径：对于指定域中的那个路径，应该向服务器发送cookie

失效时间：表示cookie何时应该被删除。

安全标志：指定后，cookie只有在使用SSL连接的时候才发生到服务器。

  1. JavaScript中的cookie

Cookie所有名字和值都是经过URL编码的，所以必须使用decodeURIComponent来解码。

由于JavaScript中读写cookie不是非常直观，常常需要写一些函数来简化cookie的功能，基本的cookie操作有三种：读取、写入和删除：

var CookieUtil={

   get:function(name){

     var cookieName=encodeURIComponent(name)+”=”,

        cookieStart=document.cookie.indexOf(cookieName),

        cookieValue=null;

     if(cookieStart>-1){

      var cookieEnd=document.cookie.indexOf(“;”,cookieStart);

      if(cookieEnd==-1){

        cookieEnd=document.cookie.length;

}

cookieValue=decodeURIComponent(doucument.cookie.substring(cookieStart+cookieName.length,cookieEnd));

}

Retrun cookieValue;

},

set:function(name,value,expires,path,domain,secure){

  var cookieText=encodeURIComponent(name)+”=”+encodeURIComponent(value);

  if(expires instanceof Date){

    cookieText+=”; expires=”+expires.toGMTString();

}

if(path){

  cookieText+=”; path=”+path;

}

if(domain){

 cookieText+=”; domain=”+domain;

}

if(secure){

cookieText+=”; secure”;

}

Document.cookie=cookieText;

},

unset:function(name,path,domain,secure){

this.set(name,””,new Date(0),path,domain,secure);

}

}
  1. 子cookie

为了绕开浏览器的单域名下的cookie数限制，一些开发人员使用了一种称为子cookie的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名称值对儿。

  • Web存储机制

也就是html5新加的sessionStorage 和localStorage

JavaScript技巧总结和本地存储(二)的更多相关文章

  1. JavaScript技巧总结和本地存储(一)

    类型检测 typeof 一般用于js的基本数据类型(undefined,number,string,boolean.注意null检测的结构是object)检测,引用类型检测不准确. instanceo ...

  2. JavaScript：浏览器的本地存储

    cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...

  3. H5本地存储二

    众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...

  4. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. HTML5 学习笔记（三）——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  6. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. HTML5 ——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  8. HTML5 学习总结（三）——本地存储（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  9. web前端实现本地存储

    当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...

随机推荐

  1. Android代码书写规范

    1.资源文件命名规则2.类名文件命名规则3.尽量少用枚举4.public方法.重要逻辑.主要类结构体必须注释,其他部分可自定注释5.提交代码必须描述清楚修改内容,如果一次提交内容过多,拆分功能进行多次 ...

  2. 如何在Ruby中编写微服务？

    [编者按]本文作者为 Pierpaolo Frasa,文章通过详细的案例,介绍了在Ruby中编写微服务时所需注意的方方面面.系国内 ITOM 管理平台 OneAPM 编译呈现. 最近,大家都认为应当采 ...

  3. centos7安装jdk环境

    有时候安装一些软件或者服务都需要jdk环境,今天就在centos上安装最新的jdk环境. 检测历时安装 1.查看Linux自带的JDK是否已安装 # java -version 2.查看JDK信息 # ...

  4. vi中的全局替换

    一.基本语法 替换命令语法: :[addr]s/源字符串/目标字符串/[option] 全局替换: :%s/源字符串/目标字符串/g 参数说明: [addr]--表示检索范围,省略时表示当前行. &q ...

  5. Bresenham算法的实现思路

    条件已知两个点的坐标p1(x0,y0),p2(x1,y1)要求画出这条直线 之后的e代表每次的误差积累,初始值为0,可以计算出斜率为k=dy/dx=(y0-y1)/(x0-x1) 1.x为阶跃步长(直 ...

  6. 洗礼灵魂，修炼python（77）--全栈项目实战篇（5）—— ATM自动存取机系统

    要求: 1.完成常识中的ATM存取款机功能 2.把ATM机故障考虑进去 3.不能直接输入账户名和卡号等等信息,模拟出插银行卡让ATM机自动读取卡信息 4.密码验证超过三次错误即锁定账户 5.操作类型有 ...

  7. python 中文报错

    解决的办法为:在程序的开头写入如下代码,这就是中文注释 #coding=utf-8

  8. Java多线程（五）线程的生命周期

    点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...

  9. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  10. spark on yarn 集群部署

    概述 hadoop2.7.1 spark 1.5.1 192.168.31.62   resourcemanager, namenode, master 192.168.31.63   nodeman ...