文档章节

cookie、localStorage、sessionStorage的使用与区别

小星星_cjx
 小星星_cjx
发布于 2017/04/27 18:06
字数 1527
阅读 59
收藏 2
点赞 0
评论 0

一、cookie

    1、定义:

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

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

    2、结构:

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

    3、传统方式:设置、读取、删除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(); 

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

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

            4.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=/"; //转码并赋值
    }

            4.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;
    }

            4.3、封装清除cookie的函数 

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

            案例代码如下:

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

二、HTML5的localStorage和sessionStorage

    1、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

 

    2、sessionStorage:

        定义:

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

        使用方法:

            和localStorage一样,请参考前面

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

三、三者的区别

特性 cookie localStorage sessionStorage
数据的生命期

可设置失效时间,

默认为关闭浏览器失效

除非被清除,

否则永久保存

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

© 著作权归作者所有

共有 人打赏支持
小星星_cjx
粉丝 0
博文 23
码字总数 18543
作品 0
广州
前端工程师
html5 LocalStorage进行离线状态保存

在使用html5中localStorage,sessionStorage,cookie或者webDatabase(目前仅pc上部分浏览器支持)进行离线数据存储,转场数据交互,比如保存游戏状态,网络游戏脱机体验,另外,有时候在网络...

IamOkay
2014/11/07
0
0
HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045
2014/10/09
0
0
localstorage、sessionstorage的用法

html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话...

韦姣敏
2017/11/04
0
0
HTML5编程之旅 第6站Web Storage

Web Storage,有时也称为DOMStorage,它提供在Web请求之间持久化数据,在此之前,远程Web服务器需要存储客户端和服务器间交互使用的所有相关数据。利用Web Storage,开发者可以将需要跨请求重...

倪伟伟
2014/03/26
0
0
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
06/29
0
0
webStorage和cookie的区别

共同点: 都是保存在浏览器端,且同源的 cookie有什么缺点? Cookie数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB 安全性问题。如果cookie被人拦截了,那人就...

君丶不易
2017/11/03
0
0
localStorage/cookie 用法分析与简单封装

  本地存储是HTML5中提出来的概念,分localStorage和sessionStorage。通过本地存储,web应用程序能够在用户浏览器中对数据进行本地的存储。与 cookie 不同,存储限制要大得多(至少5MB),...

杨小匠
昨天
0
0
手把手教你开发Chrome扩展三:关于本地存储数据

手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5中的localStorage localS...

Ryan-瑞恩
2012/12/22
0
0
html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技
2017/01/10
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mybaitis 通过Mapping 实现多表查询

1.实体类 1.1 用于做多表查询的类 public class CustomerCard { private Integer id;//主键 private String cardNumber; private Integer customerId;//用户id private String customerName;......

kuchawyz
8分钟前
0
0
Java语言学习(八):集合类框架

Java中提供了各种数据集合类,这些类主要用于保存复杂结构的数据。下面将介绍常用的几种集合类的用法。 ArrayList集合可以看做一个动态的数组,比普通数组更加灵活,更适合保存未知数量的数据...

海岸线的曙光
10分钟前
0
0
SpringBoot下Redis相关配置是如何被初始化的

参考网页 SpringBoot集成Redis的原理 https://blog.csdn.net/hry2015/article/details/74276423 https://blog.csdn.net/hry2015/article/details/75451705 application.yml配置文件中的属性是......

karma123
10分钟前
1
0
数据库事务的四大特性以及事务的隔离级别

本篇讲述数据库中事务的四大特性(ACID),并且将会详细地说明事务的隔离级别。 如果一个数据库声称支持事务的操作,那么该数据库必须要具备以下四个特性: ⑴ 原子性(Atomicity) 原子性是...

Java大蜗牛
18分钟前
0
0
Spring Boot 整合 MyBatis/通用Mapper/PageHelper分页插件

整合MyBatis 整合通用Mapper 1. POM依赖配置 <properties><mapper.starter.version>2.0.3-beta1</mapper.starter.version></properties><!-- 通用Mapper --><dependency><groupId>t......

OSC_fly
26分钟前
0
0
CentOS7 双网卡绑定

环境 操作系统 CentOS7.5,禁用 NetworkManager 服务 网卡 eth0 网卡 eth1 绑定网卡 bond0 网卡 eth0 配置 修改 /etc/sysconfig/network-scripts/ifcfg-eth0 TYPE=EthernetBOOTPROTO=noneD......

Colben
28分钟前
0
0
zk实战--rpc框架集群化

在看此篇内容时需要浏览下面内容 netty实战--手写rpc框架 前文功能简介以及功能扩充 利用netty来实现一个点对点的rpc调用。客户端和服务端都是靠手写地址进行socket同学的,无法1对多,也无法...

xpbob
44分钟前
12
0
springboot 发送邮件

获取授权码 添加配置 # 账号和密码spring.mail.username=aaa@qq.comspring.mail.password=bbb# 服务器地址spring.mail.host=smtp.qq.comspring.mail.properties.mail.smtp.ssl.en...

阿豪boy
45分钟前
0
0
如何使用GNU Ring?

文章名:如何使用GNU Ring? 作者:冰焰火灵X 1079092922@qq.com 文章许可:CC BY-SA 4.0 ##1. 安装 下载GNU Ring 点击左边选择你的系统版本(这里以 GNU/Linux 为例,我使用的是Mint 18.3)...

ICE冰焰火灵X
47分钟前
4
0
深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
53分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部