前端中的Cookie

一，概念

1，产生的原因：cookie 是用来解决 http 的无状态特点，是为了存储 sessionID ；

2，是什么： cookie 也叫 HTTPCookie，是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术。

3，特点：

a，每次请求都会传输 cookie；每次会话都会产生对应的 sessionID 并保存；

b，储存在浏览器上；

d，只能存放少量数据，最多 4 kb，cookie 里只能存放 string 类型的值；

4，cookie 和 session 的区别：

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

2、cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗，考虑到安全应当使用 session。

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

4、单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。

5、可以考虑将登陆信息等重要信息存放为 session，其他信息如果需要保留，可以放在 cookie 中。

二，Cookie 属性

1，存值

document.cookie = "name=jack";

2，替换

//重新给指定的 键 赋值相当于替换，对应的键需要一致；
document.cookie = "name=jack";
document.cookie = "name=rouse"; //最后只有一个  'name=rouse'

3，取值

//直接拿
console.log(document.cookie);

4，删除：设置过期时间

//expires  设置过期时间；设置为当前时间就是说关闭就过期
document.cookie = "name=jack;expires=" + new Date();

5，路径 path 属性；

//指定对应的目录下文件可以访问这个 cookie （指定可以访问这个 cookie 路径）
document.cookie = "name=jack;expires=" + new Date() + ";path=/";
//   / 表示指定 根 路径下的所有文件都可以访问这个cookie

6，域名 domain 属性

//指定域名，只在这个域名访问下才带上 cookie
document.cookie =
  "name=jack;expires=" + new Date() + ";domain=http://www.baidu.com";

7，安全 secure 属性

//带上 secure 就是只有https才能访问
document.cookie =
  "name=jack;expires=" + new Date() + ";domain=http://www.baidu.com/secure";

三，cookie 的封装

1，关于数据的编码和解码

//编码  因为低版本的浏览器无法识别中文，就需要编解码，兼容性问题；
// encodeURIComponent()     对数据进行编码 ascii码 针对于这俩个方法低版本浏览器不支持中文解决
var str = encodeURIComponent("刘德华");
//decodeURIComponent()      对数据进行解码
console.log(decodeURIComponent(str));

2，cookie 封装

//一般封装好后，方便直接使用；
//set的封装	设置cookie
function setcookie(key, value, date, path) {
  if (date instanceof Date) {
    //instanceof 比较两个是否属于同一类型
    document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(
      value
    )};expires=${date};path=${path}`;
  } else {
    document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(
      value
    )};expires=${new Date()};path=${path}`;
  }
}

//get的封装   获取cookie
function getcookie(key) {
  var key = encodeURIComponent(key);
  var cookies = document.cookie.split(";");
  for (var i in cookies) {
    //取出对应的键的下标
    var index = cookies[i].indexOf("=");
    if (cookies[i].indexOf(key) != -1) {
      var value = cookies[i].substr(index + 1);
      return decodeURIComponent(value);
    }
  }
  return "";
}

//remove时间过期 隔多少天以后过期
function removecookie(key, day) {
  var date = new Date();
  date.setDate(date.getDate + day);
  document.cookie = encodeURIComponent(key) + "=;expires=" + date;
}

四，json 格式数据

1，概念：json 是一种结构化的数据格式，他常用于数据传输及相关数据处理；

2，现阶段的数据传输方式通常都是 json 格式（之前是 xml 传输）所有语言都具备；

3，格式写法：[ ] 数组 { } 对象

//其实就是一个数组对象，里面的键通常为 string 类型（建议使用双引号）
//里面以键值对形式存储，键为string 值可以为任意类型（string类型使用双引号）

//样式一:
var json = [{
 	"name":"李某某"
    "age":18
},{
    "name":"周某"
    "age":20
}]
//获取值
json[1].name;	//获取 周某

//样式二：
var json1 = {
    "arr":["a","b"]
}
//获取值
json1.arr[1]	//获取 b

4，json 格式字符串的转换

// 第一个方法 eval() 解析对应的json格式字符串为对象
var str = `[{
    "name":"李四",
    "age":18
    },{
    "name":"王五",
    "age":18
}]`; //str是json格式字符串

// console.log(str[0].name); //无法获取李四
// 我们想要从str中获取李四 先转为对象
var obj = eval(str); //eval可以将json格式的字符串转为对应的对象 eval会造成安全问题（不推荐）
console.log(obj[0].name);

//使用JSON对象的静态方法 JSON.parse() 里面传入对应的json格式字符串 可以将其转为对象（常用的）
var obj1 = JSON.parse(str);
console.log(obj1[0].name); //可以获取李四

//对应的将对象转为json格式字符串  JSON.stringify() 里面传入对象 将其转为json格式字符串
var jsonStr = JSON.stringify(obj1);
console.log(typeof jsonStr);
console.log(obj1.toString()); //toString格式化的对象无法识别

上篇浏览器的BOM

下篇ECMAScript6

Cookie