zoukankan      html  css  js  c++  java

  • JavaScript技巧总结和本地存储(二)

    • 离线检测

    检测是否离线，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
  • 相关阅读:
    跨域与跨域访问
    bootstrap.min.css.map作用
    CSS
    http协议
    djngo未整理
    redis安装及配置
    git 基础
    yum安装报错
    Go语言与区块链开发（转载）
    electron实现MessageBox
  • 原文地址：https://www.cnblogs.com/hetaojs/p/6530339.html
Copyright © 2011-2022 走看看