js中cookie的基本使用

174 阅读1分钟

一、cookie 是存储于用户的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。

1.cookie存储时如果没有设置date,那么在关闭浏览器时存储的数据或被清除。

2.cookie的使用建议通过函数的封装来使用,可简化、美观代码的书写。

cookie 应用举例:

当用户首次访问页面时,页面或许会要求填写用户的用户名和密码。用户名和密码可以被存储于 cookie 中。当他们再次访问网站时,用户名和密码就会从 cookie 中取回,无需用户再去重新输入。

二、相关代码

//封装函数的使用  如果不设置时间的话关闭浏览器时所存储的数据就会过期
//存储cookie
function setCookie(name, value, iTime) { 
    //name是cookie中的名,value是其值,iTime来预定过期的时间(以天为单位)
    var iDate = new Date();
    iDate.setDate(iDate.getDate() + iTime); 
    //以天为单位,存储是需要将Date对象存储为格林威治时间形式的字符串
    document.cookie = name + '=' + value + ';expires=' + iDate.toGMTString();
}

例:setCookie('age', '18', 1); 
console.log=> { cookie: 'age=18;expires=Thu, 24 Mar 2022 08:48:09 GMT' }

    
//获取cookie
function getCookie(name) {
    //web中cookie是以分号+空格隔开的
    var res = document.cookie.split('; ');
    for (let i = 0; i < res.length; i++){
        //通过字符串高级语法获取value
      if (res[i].split('=')[0] === name) 
      {
          return res[i].split('=')[1];
      }else{
          return '';
      }
    }
}


//移除cookie 通过设置过期时间 再次打开浏览器会发现过期的cookie已经被清除
function removeCookie(name) {
    setCookie(name, '', -1);
}