storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。

• Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
• 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
• 但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

常用操作

Cookie 主要用于存储 web 页面的用户信息。

添加cookie

添加cookie：document.cookie = “key=value”; // 一次写入一个键值对

document.cookie = 'test1=hello';
document.cookie = 'test2=world';

在浏览器中查看一下现在的cookie是什么样子 打开控制台 点击application 就能看到cookies;

注意 document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加

读取cookie

读取cookie：document.cookie;

document.cookie // "test1=hello; test2=world"

上面代码从document.cookie一次性读出两个 Cookie，它们之间使用 分号空格 分隔。必须手动还原，才能取出每一个 Cookie 的值。

修改cookie

修改cookie：document.cookie = “key=value”; // 修改名为key的cookie值

document.cookie = 'test2=hah';
document.cookie // "test1=hello; test2=hah"

上面代码修改了test2对应的值

删除cookie

删除cookie：将cookie值覆盖为空，并将失效时间设置为过去的时间。

var oDate = new Date();
oDate.setDate(oDate.getDate() -7);
document.cookie = “test=;expires=”+ oDate;
//将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到了

设置域名/路径/expires

设置域名：domain

document.cookie = “key=value;domain=www.baidu.com“;

注：必须在绑定域名的服务器才可以设置域名，上不同服务器之间的cookie文件不能共享。

设置路径：path

document.cookie = “key=value;path=/“;

注：在同一路径下的网页可以共享cookie，路径不同时，不可以访问。 document.cookie = “key=value;path=/“;//设置cookie的路径为根路径，这样我们网站下的所有页面可以共享cookie 注：如果有中文内容，需要用encodeURIComponent(‘xxxx’)进行编码，再使用decodeURIComponent(‘xxxx’)进行解码，解决中文乱码的问题。

失效时间：expires

失效时间：expires ，没有设置失效时间的cookie 在浏览器关闭以后就会自动删除，如果设置了失效时候在未来的时间，就可以让cookie保存的时间长一点

document.cookie = “key=value;expires=”+ oDate;
var oDate = new Date();
oDate.setDate(oDate.getDate() + 7);
document.cookie = “key=value;expires=”+ oDate;
//上面代码设置cookie的过期时间为7天以后

cookie的封装

增加/修改cookie函数

function setCookie(name,value,iDay){
    var newDate = new Date();
    newDate.setDate(newDate.getDate()+iDay);
    console.log(name)
    value = encodeURIComponent(value);//编码  把可能为中文的编码一下
    console.log(name)
    document.cookie=name+"="+value+";expires="+newDate+";path=/";
}

获取cookie函数：

function getCookie(name){
    cookie = decodeURIComponent(document.cookie);  //解码
    var arr = cookie.split("; ");
    for(var i =0; i<arr.length; i++){
        var arr2 = arr[i].split("=");
        if(arr2[0] == name){
            return arr2[1];
        }
    }
}

删除cookie函数：

function removeCookie(name){
      setCookie(name,1,-100);
}

将JSON存储到Cookie当中

在日常的数据操作中，我们可以将JSON存储到Cookie当中，这样能够让Cookie存储更多更灵活的数据，操作方式也和正常的存储和使用相同。

我们可以把js中的对象，转为字符串，存贮在cookie中，从而来存贮复杂的数据

完整的示例demo如下:

function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}
let stu_info = {
  "name":"zhangsan",
  "age":30,
  "like":"吃喝玩乐"
};

// 通过JSON.stringify()方法将数据转换为JSON
let new_info = JSON.stringify(stu_info);
setCookie('stu_info',new_info,1);
let a = getCookie('stu_info');
console.log(a);
let b= JSON.parse(a);
console.log(b);

demo2:

var userObj = {name:"张三",age:18}
var jsonStr = JSON.stringify(userobj);
setCookie('userinfo',jsonStr,7)//把用户的信息存储在cookie中
var arr = [
{name:"张1",age:18},
{name:"张2",age:18},
{name:"张3",age:18}
]
var jsonStr = JSON.stringify(arr);
setCookie('users',jsonStr,7)//把多个账户息存储在cookie中

第三方库取json数据

源码地址 https://github.com/js-cookie/js-cookie

• 存字符串 Cookies.set('name', 'value');

• 取字符串 Cookies.get('name');

• 存json对象 Cookies.set('person', { 'name': 'user', 'age': '18' });

• 取json对象 Cookies.getJSON('person');

• 删除对象 Cookies.remove('name');