JavaScript中的Cookie 和 Json的使用
JSON
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。采用的是完全独立于编程语言的文本格式来存储和表示数据。于2001年开始广泛的推广使用，2005-2006正式的称为主流的数据格式。（JSON是一种高效的数据存储格式，JSON的结构和对象一致，也是以键值对的形式来进行存储的；但是JSON是字符型数据）
功能：JSON主要用来进行数据的存储和文本信息的交换，类似于XML。但是却比XML更加的快速和轻便，而且易于解析。
{ "name":"admin","age":16,"sex":null }
需要注意的是，json虽然采用JavaScript的语法来表示和描述对象，但是JSON仍然独立于语言和平台。JSON的解析器和JSON的库支持许多不同的编程语言。JSON的key和value
JSON通常情况下以{}的形式存在，当然也可以存在其他的类型。
{ "sites":[ "http://www.baidu.com", "http://www.sina.com" ], "info":"网址记录" }
在json当中，json的值可以是下面的类型：
- 数字(整数或者浮点数)
- 字符串(在双引号内)
- 逻辑值(true 或者 false)
- 数组(在中括号中)
- 对象(在大括号中)
- null
下面都是正确的json：
{ "name":"test", "age":30 } { "info":[1,2,3,4] } [ {"name1":"h1","age1":30}, {"name2":"h2","age2":15} ] // ....
当然，你写好了一个JSON如果不确定是否正确，可以将代码拷贝到下面这个网址进行JSON的判断： http://www.bejson.com/。
JavaSript操作JSON的方法
在JavaScript中，有两个方法专门用来操作JSON。
- JSON.parse() 将一个JSON对象解析成JavaScript对象
- JSON.stringify() 将JavaScript值转换成JSON对象。
下面我们在demo中来应用一下这两个方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
// 创建一个对象
let student_info = {
"name":"zhangsan",
"age":30,
"like":"吃喝嫖赌"
};
// 将这个js的对象转换成json对象
let js_info = JSON.stringify(student_info);
console.log(js_info);
// 再将这个json对象解析成js对象
let js = JSON.parse(js_info);
console.log(js);
</script>
</html>
cookie
Cookie 主要用于存储 web 页面的用户信息。下面的两个函数，用于存储cookie和查询cookie
cookie的使用添加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对应的值
失效时间：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：将cookie值覆盖为空，并将失效时间设置为过去的时间。 var oDate = new Date(); oDate.setDate(oDate.getDate() -7); document.cookie = “test=;expires=”+ oDate; //将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到了
设置域名：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’)进行解码，解决中文乱码的问题。
6：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中
Cookies取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');