浏览器缓存Cookie,localStorage,sessionStorage三者的区别与用法

在web网页开发中，常常会用到Cookie,localStorage,sessionStorage等方式临时储存客户端数据，本文为大家解说这三种方式的区别，应用场景以及使用方法。

三者的异同

1. cookie

   cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。支持所有现代浏览器。

2. localStorage和sessionStorage

   localStorage和sessionStorage是HTML5新属性，使用HTML5本地存储可以在本地存储用户的浏览数据。

3.比较图

应用场景

有了对上面这些差别的直观理解，我们就可以讨论三者的应用场景了。

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。

localStorage 和sessionStorage的用法是一样的，主要看你的数据储存的时间相应选择，可以储存购物车的信息，表单的数据储存，当然也可以储存其他数据。

使用方法

一.Cookie创建，读取，删除

1.创建一个 cookie(cname,键名；cvalue,值；exdays,保存时间)

function setCookie(cname,cvalue,exdays){

var d = new Date();

d.setTime(d.getTime()+(exdays*24*60*60*1000));

var expires = "expires="+d.toGMTString();

document.cookie = cname+"="+cvalue+"; "+expires;

}

(2)读取cookie

function getCookie(cname){

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++) {

var c = ca[i].trim();

if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

return "";

}

(3)删除cookie

function delCookie(name)

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

二.localStorage和sessionStorage的使用相对简单

读取和创建(name:键名；value:键名对相应的值)，只能储存字符类型；

创建

localStorage.setITem("name"，value);

sessionStorage.setITem("name"，value);

读取

var a=localStorage.getItem("name");

var b=sessionStorage.getItem("name");