原生js cookie本地存储

JS cookie

1、概述

cookie也叫HTTP Cookie，最初是客户端与服务器端进行会话（Session)使用的。

如果没写expires,那么下次打开网页，cookie就会消失，这个就是会话机制

2、格式

name=value; [expires=date]; [path=path]; [domain=somewhere.com];

[secure]

encodeURIComponent函数可以：将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件

上面的方法主要用于协议、主机名、路径或查询字符串

3、封装函数

设置cookie

function setCookie(name,value,day,path){
  var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);    //encodeURIComponent
  if(day>0){
    var myDate=new Date();
    myDate.setDate(myDate.getDate()+day);
    cookieText+=";expires="+myDate;
  }
  if(path){
    cookieText+=";path="+path;
  }
  document.cookie=cookieText;
}

获取cookie

function getCookie(name){
  var i=document.cookie.indexOf(name);
  if(i!=-1){
    var start=i+name.length+1;
    var end=document.cookie.indexOf(";",i);
    if(end==-1){
      end=document.cookie.length;
    }

    return document.cookie.substring(start,end);
  }
}

删除cookie

function removeCookie(name){
  var i=document.cookie.indexOf(name);
  if(i!=-1){
    var start=i+name.length+1;
    var end=document.cookie.indexOf(";",i);
    if(end==-1){
      end=document.cookie.length;
    }
    let val=document.cookie.substring(start,end);
  }

  if(val!=undefined){
    document.cookie=name+"="+val+";expires="+new Date(0);
  }
}

cookie的特性

cookie自身局限性

条数上的限制，最多20条

大小上的限制，最多4k（4096字节）

cookie安全性较低，不能存放敏感数据

带宽的浪费

Cookie 通过在客户端记录信息确定用户身份， Session 通过在服务器端记录信息确定用户身份。

cookie 与 session 的区别

cookie 数据存放在客户的浏览器上，session 数据放在服务器上

考虑到安全应当使用 session

session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。