文档章节

本地存储和离线缓存

小星星_cjx
 小星星_cjx
发布于 2017/04/27 18:06
字数 2323
阅读 62
收藏 0

本地存储

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)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。

区别:

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

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

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

© 著作权归作者所有

共有 人打赏支持
小星星_cjx
粉丝 1
博文 35
码字总数 31113
作品 0
深圳
前端工程师
私信 提问
html5离线储存,application cache,manifest使用体验

最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了H...

pureboys
2013/09/07
0
0
[IBM DW] 使用 HTML5 开发离线应用

简介: Web2.0 技术鼓励个人的参与,每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网...

红薯
2010/11/28
681
2
前端几种存储方式的总结

总体情况 h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。 主要应用:购物车、客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持...

LuckyWinty
2016/07/24
43
0
Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗
2017/03/04
0
0
HTML5 Web Storage -- 让Cookies看起来如此古老

在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage。我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *Cookies 怎么样又为何被使用 *W...

彭博
2012/10/08
7.2K
5

没有更多内容

加载失败,请刷新页面

加载更多

浅谈“李氏代换”——从纪念金庸和斯坦李说起

李氏代换(LSP)简介 李氏代换是软件设计的一个原则,又名依赖倒转原则或依赖倒置原则,其衍生原则有接口分离原则等。该原则由Barbara Liskov于1988年提出。 该原则指出,程序中高级别的元素...

SamYjy
17分钟前
8
0
JavaScript实现在线websocket WSS测试工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
35分钟前
0
0
linux-scp 远程拷贝报错原因

刚拿到一台重装后的服务器,远程ssh都正常,但是一scp拷贝东西就报错: 本地确定是有scp命令的,而且如果是本地没有scp不会报后面那句lost connection,因此就是远程没有scp这个命令。因此在...

linuxprobe16
48分钟前
1
0
OSChina 周六乱弹 —— 谁小时候没当过熊孩子呀

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《行尸走肉》- amazarashi 《行尸走肉》- amazarashi 手机党少年们想听歌,请使劲儿戳(这里) @神话 :周五了,周末干啥...

小小编辑
今天
94
4
docker部署springboot项目

安装docker 菜鸟教程 springboot项目 maven依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001......

yimingkeji
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部