本文共 2887 字，大约阅读时间需要 9 分钟。

cookie的概述

1.localStorage是html5新增。

• 本地储存使用的
• 永久储存
• 浏览器支持储存5M大小

2.cookie的概念：

• Cookie又叫会话跟踪技术是由web服务器保存再用户浏览器上的小文件本
• web服务器保存
• 关闭浏览器===会话结束

3.cookie的特点

• 禁用cookie,无法正常登录。
• cookie与浏览器相关,不同的浏览器之间的cookie不能互相访问。
• cookie可以被删除。
• cookie储存的也是字符串。
• cookie自由设置过期时间(储存多长时间)
• cook储存4K大小
• document.cookie(document来调用)

cookie的存储

1.储存cookie , docuement.cookie 一条条储存,键值对(key=value),如果key相同，覆盖

document.cookie = "name=zhangsan";document.cookie = "age=100";document.cookie = "sex=男";

2.存储带有过期时间的cookie

let d = new Date();//获取当前的日期 //alert(d.getDate());//4 获取当天是多少号  d.setDate(d.getDate()+10);//获取当前的日期+10;在设置回去；  document.cookie="name=zhangsan;expires="+d;//expires:设置过期日期;

3.储存cookie的函数封装

// encodeURIComponent();//对文本框输入的值进行编码，中文，特殊字符编码结果是%加上这些符号的ASCII码十六进制对照表。  	// decodeURIComponent();//输入的值进行解码    function addcookie(key, value, days) {
           let d = new Date();        d.setDate(d.getDate() + days);        document.cookie = `${
     key}=${
     encodeURIComponent(value)};expires=${
     d}`;    }    addcookie("name", "张三", 7);    addcookie("age", "100", 7);    addcookie("sex", "男", 7);

cookie的获取

1.获取cookie–document.cookie获取全部的cookie

alert(document.cookie);//name=%E5%BC%A0%E4%B8%89; sge=100; sex=%E7%94%B7;    console.log(decodeURIComponent(document.cookie));//name=张三; sge=100; sex=男    //获取的全部是cookie中间通过分号和空格连接起来的。("; ")    console.log(decodeURIComponent(document.cookie).split("; "));//利用分号和空格进行拆分    ["name=张三, sge=100, sex=男"];

2.通过封装函数来获取cookie中的某个值

function getcookie(key) {
           let cookiearr = decodeURIComponent(document.cookie).split('; ');        //console.log(cookiearr);//["name=张三", "sge=100", "sex=男"]        for (let i = 0; i < cookiearr.length; i++) {
               let newarr = cookiearr[i].split('=');            if (key === newarr[0]) {
                   return newarr[1];            }        }    }    console.log(getcookie("name"));//张三    console.log(getcookie("age"));//100    console.log(getcookie("sex"));//男

cookie的删除

• 删除cooki-将cookie的过期时间设为一个已经过去的时间。
• 思路：添加cookie的时候key的值相同，会覆盖;
• addcookie(“name”,"",-1);addcookie(“name”,"",-1);

封装

function delcookie(key){
       addcookie(key,"",-1);} delcookie("name");//删除为name的cookie数据；

综合封装

let jscookie = {
       add: function (key, value, days) {
           let d = new Date();        d.setDate(d.getDate() + days);        document.cookie = `${
     key}=${
     encodeURIComponent(value)};expires=${
     d}`;    }    ,    get: function (key) {
           let cookiearr = decodeURIComponent(document.cookie).split('; ');        //console.log(cookiearr);//["name=张三", "sge=100", "sex=男"]        for (let i = 0; i < cookiearr.length; i++) {
               let newarr = cookiearr[i].split('=');            if (key === newarr[0]) {
                   return newarr[1];            }        }    }    ,    del: function (key) {
          jscookie.add(key, '', -1);    }}jscookie.del("age");//删除名为age的cookie数据；

转载地址：http://wgkgn.baihongyu.com/