• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

浅谈cookie、localStorage、sessionStorage的使用

技术分析 Tomy 570次浏览 已收录 0个评论 扫描二维码

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

cookie

cookie是什么

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

cookie的特性

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

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

浅谈cookie、localStorage、sessionStorage的使用

 

浅谈cookie、localStorage、sessionStorage的使用

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

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

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

localStorage

localStorage是什么

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

localStorage的特性

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

下面做个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适合存一些比较小的图片。

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可以监听到,如图:

浅谈cookie、localStorage、sessionStorage的使用

 

浅谈cookie、localStorage、sessionStorage的使用

 

sessionStorage

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


杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明浅谈cookie、localStorage、sessionStorage的使用
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址