做有态度的前端团队

网易FEG前端团队

浅谈cookie、localStorage、sessionStorage的使用

本文主要介绍cookie、localStorage、sessionStorage这三者的区别和基本的应用,不对的地方欢迎大家多多指教~

一、cookie

1、cookie是什么

  • 简单地说,cookie就是页面用于保存信息的,比如常见的保存用户登录的用户名和密码。

2、cookie的特性

  • 大小有限,大概4K ; 数量有限,大概50条(因浏览器而异)
  • 兼容性好
  • 同域可共享一套cookie
  • 有期限(会过期)
  • 会伴随着http请求
    ...

3、cookie的基本用法

调试cookie的时候直接点开本地的html文件是不行的(firefox可以),文件需要在服务器环境(或localhost)。下面介绍cookie的基本用法。

document.cookie = 'name=xiaojiecong';  //设置cookie      
document.cookie = 'sex=male';  //下面增加的这一条并不会覆盖上一条cookie,这里可以理解为添加  
document.cookie ='name=mj';  //如果要改变一个cookie的值,只需重新赋值

封装一下(设置、读取、删除)

//设置cookie
function setCookie(name, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay); //设置Date对象内部时间,iDay表示几天后。
    document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + oDate.toUTCString() + ';path=/';
}
//读取cookie
function getCookie(name) {
    var arr = document.cookie.split("; "); //cookie是以键值对形式存在,用“分号空格” 隔开的,比如 a=1; b=2 ; c=3; 
    for (var i = 0, len = arr.length; i < len; i++) {
        var arr2 = arr[i].split('=');
        if (arr2[0] == name) {
            return decodeURIComponent(arr2[1]);
        };
    }
    return '';//遍历完都没找到cookie,返回空字符串
}
//清除cookie  
function clearCookie(name) {
    setCookie(name, "", -1); //设置一个过去的时间即可
}

Chrome浏览器查看cookie

1.png

2.png

值得注意的是如果cookie的键/值使用到分号(;),等号(=),设置cookie时需要使用encodeURIComponent()编码,取值的时候需要使用decodeURIComponent()解码才能读取完整的cookie值。(网上有看到用escape()、unescape()编码解码的,不过ECMAScript v3 已从标准中删除了,并反对使用),下面举个小例子:

setCookie('hhh','qq;xxx',7);// 如果没经过编码解码过程,这里取出来的值会是qq,分号和等号后面的会被忽略

另外,也可以使用cookie插件,目前我们小组的jq库已经集成了这个,用法也比较简单。

二、localStorage

1、localStorage是什么

  • localStorage,HTML5的一个API,顾名思义是本地存储,用于存放一些数据在浏览器。

2、localStorage的特性

  • 大小一般5MB,相对cookie来说大得多
  • 持久化存储,不会过期,除非主动删除
  • 数据仅存在客户端,不参与和服务器通信,减少了http请求次数
    ...

3、下面做个demo介绍一下它的基本用法。

<input type="button" value="设置" id="set" />
<input type="button" value="获取" id="get" />
<input type="button" value="执行" id="done" />
<input type="button" value="删除" id="del" />
var ls = window.localStorage,
    oSet = document.getElementById('set'),
    oGet = document.getElementById('get'),
    oDone = document.getElementById('done'),
    oDel = document.getElementById('del');

//判断浏览器是否支持,这也需要在服务器环境或localhost,不然无法准确判断。(直接打开html文件,IE8不支持,实际是支持的)
if (ls) {
    alert("该浏览器支持localStorage");
} else {
    alert("该浏览器不支持localStorage");
}
//设置
oSet.addEventListener('click', function() {
    ls.setItem('name', 'xiaojiecong');
    ls.setItem('sex', 'male');
    ls.setItem('fn', 'alert("Hello world!")'); //这里面的alert("Hello world!")是个字符串,也可以存在localStorage里,解析后可以执行。
}, false)
// 获取
oGet.addEventListener('click', function() {
    alert(ls.getItem('name')); //返回的结果为xiaojiecong
}, false)
oDone.addEventListener('click', function() {
    eval(ls.getItem('fn')) //返回的结果为Hello world!
}, false)
//删除
oDel.addEventListener('click', function() {
    ls.removeItem('name'); //删除指定的键值
    // ls.clear(); //删除所有
}, false)

localStorage不限于存储一般的数据,还可以存储js,css,json等等,此外还可以存图片,那图片要怎么存localStorage里啊?可以把图片转化为Base64数据格式,就是形如这样:“data:image/jpg;base64,xxxxxx……”很长的一段字符串。localStorage适合存一些比较小的图片。

4、localStorage还可以实现同域页面之间通讯(也可以跨域)

HTML5的本地存储,提供了一个storage事件,可以对键值对的改变进行监听。下面这段JS是写在demo2.html里的,用于监听demo1.html的一些行为。

var ls = window.localStorage;
window.addEventListener('storage', function(e) {
    console.log(e);
}, false)

当点击demo1.html页面上的设置按钮,demo2.html可以监听到,如图:

1.png

2.png

三、sessionStorage

session,会话的意思,顾名思义,sessionStorage是用于存储临时数据的,当浏览器窗口一关闭数据就清空了,其用法和localStorage一样。

手机阅读请扫描下方二维码:

已有 1 条评论

  1. 1、cookie一般不会保存密码这种敏感的关键信息,只会保存一个登陆的加密凭证
    2、客户端存储,一般在IE下,还会用到userData,window.name这两个,有空可以看看~~

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif