Cookie和localStorage

本文深入探讨了Cookie和LocalStorage在网页开发中的使用方法,包括如何设置、修改、获取、设置过期时间和删除Cookie;以及如何使用LocalStorage进行数据存储。通过实例代码展示关键步骤,帮助开发者更好地掌握这两种存储方式的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Cookie
1、设置cookie
-----document.cookie="userId=828";
  cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。
-----document.cookie="str="+escape("I love ajax");
    使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。


2、修改:
-----document.cookie="userId=828";//只需重新赋值
3、获取cookie的值:
-----var strCookie=document.cookie;//获得以分号隔开的多个名/值对所组成的字符串
  案例:
-----获取单个cookie的值:
<script language="JavaScript" type="text/javascript">
//设置两个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);
</script>
4、设置cookie终止时间:
-----cookie都是单会话cookie,浏览器关闭后这些cookie将会丢失
  案例:
-----如果要将cookie设置为10天后过期,可以这样实现:
<script language="JavaScript" type="text/javascript">
//获取当前时间
var date=new Date();
var expireDays=30;  //当用户再次登录刷新时间
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; expires="+date.toGMTString();
</script>
5、删除cookie:
-----可以将其过期时间设定为一个过去的时间
  案例:
<script language="JavaScript" type="text/javascript">
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1000);
//将userId这个cookie删除   重置
document.cookie="userId=828; expire="+date.toGMTString();

</script>


localStorage
1、用法:
if(window.localStorage){
  alert('这个浏览器支持本地存储');
}else{
  alert('这个浏览器支持不本地存储');
}
2、赋值:
localStorage.a=3;//设置a为"3";
localStorage["a"]="sfsf";//设置a为"sfsf";
localStorage.setItem("b","isaac");//设置b为"isaac";
3、取值:
var a1=localStorage["a"];//获取a的值;
var b=localStorage.getItem("b");//获取b的值;
4、清除:
localStorage.removeItem("a");//清除a的值
5、通过localStorage.key(i)---取出所有key:
   var localStorage=window.localStorage;
     for(var i=0;i<localStorage.length;i++){
        alert(localStorage.key(i)+" "+localStorage.getItem( localStorage.key(i)))
       }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值