本地存储和离线缓存

2019独角兽企业重金招聘Python工程师标准>>>

本地存储

1、cookie

定义

Coookie，有时也用其复数形式，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。存储在用户本地终端上的数据。

Cookie最典型的应用是判定注册用户是否已经登录网站，存储用户的登录信息。

结构

cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“ ; ”分隔。

传统方式：设置、读取、删除cookie：

//设置cookie，多个用分号加空格(; ）隔开：
//获取当前时间 
var date=new Date(); 
var expiresDays=10; 
//将date设置为10天以后的时间 
date.setTime(date.getTime()+expiresDays*24*3600*1000); 
//将userId和userName两个cookie设置为10天后过期 
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString(); 


//获取cookie：
//设置两个cookie 
document.cookie="userId=828"; 
document.cookie="userName=hulk"; 
//获取cookie字符串 
var strCookie=document.cookie; 
//将多cookie切割为多个名/值对 
var arrCookie=strCookie.split("; "); 
var userId; 
//遍历cookie数组，处理每个cookie对 
for(var i=0;i<arrCookie.length;i++){ 
    var arr=arrCookie[i].split("="); 
    //找到名称为userId的cookie，并返回它的值 
    if("userId"==arr[0]){ 
        userId=arr[1]; 
        break; 
    } 
} 
alert(userId); 


//清除cookie：将其过期时间设定为一个过去的时间
//获取当前时间 
var date=new Date(); 
//将date设置为过去的时间 
date.setTime(date.getTime()-10000); 
//将userId这个cookie删除 
document.cookie="userId=828; expires="+date.toGMTString(); 

函数封装：设置、读取、删除cookie：

    使用传统的方法处理cookie比较麻烦，而且不能指定获取某个cookie对应的值，因此我们需要封装相应的函数。

1）封装设置cookie的函数

function setCookie(name, value, seconds) { //设置cookie
    seconds = seconds || 0; //seconds有值就直接赋值，没有为0，这个根php不一样。
    var expires = "";
    if (seconds != 0 ) { //设置cookie生存时间
        var date = new Date();
        date.setTime(date.getTime()+(seconds*1000));
        expires = "; expires="+date.toGMTString();
    }
    document.cookie = name+"="+escape(value)+expires+"; path=/"; //转码并赋值
}

2）封装取得cookie的函数

function getCookie(name) {  //取得cookie
    var nameEQ = name + "=";
    var ca = document.cookie.split(';'); //把cookie分割成组
    for(var i=0;i < ca.length;i++) {
        var c = ca[i]; //取得字符串
        while (c.charAt(0)==' ') { //判断一下字符串有没有前导空格
            c = c.substring(1,c.length); //有的话，从第二位开始取
        }
        if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
            return unescape(c.substring(nameEQ.length,c.length)); //解码并截取我们要值
        }
    }
    return false;
}

3）封装清除cookie的函数 

function clearCookie(name) {   //清除cookie
    setCookie(name, "", -1);
}

案例代码如下：

setCookie("a","haha",1800);  //设置cookie
var a = getCookie("a");   //获取指定的cookie值
clearCookie("a");   //清除指定的cookie

2、localStorage

定义

用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

使用方法

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性：

if(！window.localStorage){
  alert("浏览器不支持localstorage");
}else{
  //主逻辑业务
}

1）localStorage的增（三种方式）：

！localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage。

不管存储进去是什么类型，返回的都是string类型，localStorage只支持string类型的存储

var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",1);

2）localStorage的删（两种方式）：          

var storage=window.localStorage;
//将localStorage的所有内容清除
storage.clear();
//将localStorage中的某个键值对删除
storage.removeItem("a");
  

3）localStorage的查（三种方式）：

var storage=window.localStorage;
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);

4）localStorage的改，即重新赋值（三种方式）：

var storage=window.localStorage;
//修改a字段
storage["a"]=2;
//修改b字段
storage.a=2;
//修改c字段
storage.setItem("c",2);

注意事项：

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成字符串形式，这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成JSON字符串。  

var storage=window.localStorage;
var data = {
    name: 'Chenjx',
    sex: 'female',
    age: '22'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

扩展：JSON.stringify()和JSON.parse()

（1）JSON.stringify() 用于从一个对象解析出字符串，例如：

var data = { //定义一个对象
  a: 1,
  b: 2
}
console.log(typeof data); //输出：object
var datastr = JSON.stringify(data);
console.log(typeof datastr); //输出：string
console.log(datastr); //输出：{"a":1,"b":2}

（2）JSON.parse() 用于从一个字符串中解析出json对象，例如

//定义一个字符串，！注意：单引号写在{}外，每个属性都必须双引号，否则会抛出异常
var str='{"a":1,"b":2}'; 
console.log(typeof str); //输出：string
var strobj = JSON.parse(str); 
console.log(typeof strobj); //输出：object
console.log(strobj); //输出：Object: a:1
//                                  b:2
//                                 _proto_:Object

 

3、sessionStorage

定义

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

使用方法

和localStorage一样，请参考前面

var storage=window.sessionStorage;
//和localStorage一样

三者的区别

特性	cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间， 默认为关闭浏览器失效	除非被清除， 否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4KB左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在http头，如果保存过多数据会有性能问题	仅在客户端（浏览器）中保存不参与和服务器的通信	仅在客户端（浏览器）中保存不参与和服务器的通信
易用性	需要程序员自己封装，源生cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好支持	源生接口可以接受，亦可再次封装来对Object和Array有更好支持

离线缓存 

HTML5引用了应用程序缓存，这意味着web应用可在没有因特网连接时进行访问

为什么要使用离线缓存

应用程序缓存为应用带来的优势：

• 离线浏览：用户可在应用离线时访问它们
• 速度：已缓存资源加载速度快
• 减少服务器负载：浏览器只从服务器下载更新过的资源

Application Cache（Manifest）

使用方法

1）在html标签添加manifest属性

在页面的html标签添加manifest属性，属性值为manifest文件的路径。如：

<!DOCTYPE HTML>
<html manifest="../js/demo.manifest">
    ... 
</html>

2）编写manifest文件

manifest文件是简单的文本文件，它会告知浏览器需要缓存的内容以及不需要缓存的内容。

manifest文件可分为三部分：

• CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存
• NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK：在此标题下列出的文件规定当前页面无法访问时的回退页面（比如404页面）

CACHE MANIFEST
#version 1.1 //版本号
CACHE:
    html/index.html //需要缓存的文件
NETWORK:
    js/query.js //不需要缓存的文件
FALLBACK:
    html/index.html //当页面无法访问时的回退页面

注意事项

• 浏览器对缓存数据的容量限制可能不太一样
• 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器会继续加载之前的缓存
• 引用的manifest文件必须和html文件同源、同域（同域名、同端口、同协议）
• 浏览器的自动缓存会导致更改了的html文件必须更新版本才能更新页面
• 更新版本后，必须刷新一次才会启动新版本
• 当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存和传统浏览器缓存的区别

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

区别：

• 离线缓存是针对整个应用，浏览器缓存是单个文件
• 离线缓存断网了还是可以打开页面，浏览器缓存不行
• 离线缓存可以主动通知浏览器更新资源

本地存储和离线缓存的区别

• 本地存储和离线缓存都是为了方便网页的加载，提高用户的体验
• 本地存储一般存储的都是数据，而离线缓存一般存储的是网页等

转载于:https://my.oschina.net/u/3026585/blog/888628