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');