js学习之cooking

最新推荐文章于 2024-05-12 09:55:26 发布

哼,小呀么小胖子

最新推荐文章于 2024-05-12 09:55:26 发布

阅读量733

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102709979

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

什么是cookie：
cookie是一些数据(存储用户数据)
cookie存在哪里：存储于你电脑上的文本文件中
cookie的作用：记录浏览器中用户的信息
cookie技术又叫会话跟踪技术
前后端都可以使用

cookie的主要内容
名称(cookie的唯一标识) name
内容(cookie存放的内容) content
域名(cookie所能使用的域名，即文件存放的文件夹)
路径(cookie存放的子目录) / path
创建时间(cookie创建的时间，即文件创建的时间)
到期时间(cookie到期的时间，即文件删除的时间) expires

cookie的特点
1.文件有大小限制：4KB
2.数量限制：一般浏览器，限制大概在50条左右
3.读取有域名限制：不可跨域读取，只能由来自写入cookie的同一域名的网页可进行读取。简单的讲就是，谁写的cookie，谁才有权利读取。
4.时效限制：每个cookie都有时效，最短的有效期是会话级别。就是当浏览器关闭，cookie会立即销毁。如果没有指定cookie的时效，那么默认的时效就是会话级别

cookie的缺点
1.cookie可能被禁用
2.cookie与浏览器相关联，不能跨浏览器访问
3.cookie可能被删除
4.cookie安全性不高

cookie注意点
1.cookie的名或者值中不能包含分号(；)、逗号(,)、等号(=)以及空格
2.cookie名唯一值，同名会被覆盖
3.中文需要编码(encodeURIComponent)和解码(decodeURIComponent)
4.cookie用来存放不太重要的信息
例:

document.cookie = 'username_zhangsan=zhangsan;path=/;expires=' + new Date('');

cookie的增,删,改

//cookie的新增:
	document.cookie = 'name=content;path=/;expires=' + new Date();
//cookie的修改(cookie名称唯一,使其覆盖):
	document.cookie = 'name=我是被修的;path=/;expires=' + new Date('2019/10/25');
//cookie的删除(设置过期时间)
	document.cookie = 'name=过期;path=/;expires=' + new Date('2008/1/1');

cookie的解析

 var cookie = document.cookie;
  cookie = cookie.split('; ');
  cookie = cookie.map(value => {
    var temp = value.split('=');
    return {
      name: temp[0],
      content: temp[1]
    }
  })
  var res = cookie.filter(value => {
    return value.name === 'username_lisi'
  })[0];
  console.log(res.content);

对cookie进行封装

 //创建cookie
    function setCookie(name,content,iDay){
        var date=new Date();
        var day=date.getDate();
        var hours=date.getHours();
        date.setDate(day + iDay);   //设置几天后过期
        date.setHours(hours-8);     //消除东八区自动加8小时的影响
        document.cookie=`${name}=${encodeURIComponent(content)};path=/;expires=${date}`;
    }
    
    setCookie("text","我是第一个cookie",7)
    setCookie("text1","我是第二个cookie",7)
    setCookie("text2","我是第三个cookie",7)

    //删除cookie
    function removeCookie(name){
        setCookie(name,"",-1)
    }
    //removeCookie("text")      //此时删不掉,因为在删的同时一直在创建,一般都是在某个事件中创建cookie,在某个事件中删除cookie


    //获取cookie列表,结果为数组,数组的内容为对象
    function getCookieList(){
        var list=[];
        var cookie=document.cookie;
        if(!cookie){
            return  list;
        }
        list=cookie.split("; ")
        list=list.map(value=>{
            var temp=decodeURIComponent(value).split("=");
            return{
                name:temp[0],
                content:temp[1],
            }
        })
        return list;
    }
    console.log(getCookieList());

    //获取name对应的cookie内容
    function getCookie(name){
        var list=getCookieList();
        var res=list.filter(value=>{
            return value.name===name;
        })[0]   //其返回值为一个数组,第0个下标则为其结果
        if(res){
            return decodeURIComponent(res.content);
        }else{
            return ''
        }
    }
    console.log(getCookie('text'));

    //encodeURIComponent对中文进行编码
    //decodeURIComponent对所编的码进行解码

小案例:
点击计数加1,且刷新不对其产生影响
下面只给出body和script部分的代码

<body>
  0
</body>
<script>
  var cookie = document.cookie;
  if (cookie) {
    cookie = cookie.split('; ');
    cookie = cookie.map(value => {
      var temp = value.split('=');
      return {
        name: temp[0],
        content: temp[1]
      }
    });
    var res = cookie.filter(item => item.name === 'data_count')[0];
    if (res) {
      // var content = res.content
      var { content } = res;
      if (content) {
        document.body.innerText = content;
      }
    }
  }
  document.onclick = function () {
    var count = document.body.innerText * 1;
    count++;
    document.body.innerText = count;
    document.cookie = `data_count=${count};path=/;expires=${new Date()}`;
  }
</script>

哼,小呀么小胖子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js学习之cooking

什么是cookie：cookie是一些数据(存储用户数据)cookie存在哪里：存储于你电脑上的文本文件中cookie的作用：记录浏览器中用户的信息cookie技术又叫会话跟踪技术前后端都可以使用cookie的主要内容名称(cookie的唯一标识) name内容(cookie存放的内容) content域名(cookie所能使用的域名，即文件存放的文件夹) 路径(cookie...
复制链接

扫一扫

专栏目录