json字串，localStorage本地儲存
技術標籤：DOMjavascript
格式；
鍵值對格式 鍵和值都需要用雙引號去包括
'{"name":"yasuo"}'
json用途：
- 在網路傳輸時使用。 比如前後端互動。
- 不能夠傳輸物件和陣列的。
- 只能通過字串形式去傳輸資料。
- 所以說我們如果要傳輸物件和陣列，我們需要將其轉換為字串。
- json格式就是滿足物件和陣列資料結構的一種字串
json的使用方法：
JSON.parse() 把json格式的字串轉為js中的陣列或物件 json.stringify() 把js中的陣列或物件轉為json字串 物件： '{"屬性名":"屬性值","屬性名2":"屬性值2","屬性名3":"屬性值3"}' 陣列： 1.儲存陣列不是物件。 '[1,2,3,4]' 2.儲存陣列為物件 '[{"name":"亞索","age":"28","skill":"狂風絕息斬"},{"name":"劫","age":20,"skill":"瞬獄影殺陣"}]' 數字和布林值可以不用帶雙引號 物件在轉json字串時，函式會被自動過濾掉。 parse() 這個方法會新建立一個物件或陣列
物件與陣列轉換為字串
程式碼如下
var obj={
name:'亞索',
age:'32',
skill:"狂風絕息斬"
}
var json=JSON.stringify(obj);
console.log(json);//{"name":"亞索","age":"32","skill":"狂風絕息斬"}
var newstr= 
localStorage本地儲存
本地：
1. 不會對伺服器造成負擔
2. 提高訪問速度
3. 會佔用本地記憶體
4. 重要的資訊不安全
- localstorage h5新增的 IE8以下不相容 5MB
- sessionstorage 5M
- cookie 4KB
伺服器：
資料庫
優點：
容量比cookie要大
侷限：
有相容性問題
不會被爬蟲獲取
本質上是對字串的讀取操作，比較頻繁，儲存的內容比較多，會導致頁面卡頓。
使用：
1.先考慮相容性問題
if - 將陣列儲存到localstorage
三種寫法：
key value
storage["name"] = "yasuo";
storage.setItem("name","sss")
storage.age = 18;
3.讀取
storage["鍵"];
storage.getItem("鍵")
storage.鍵;
4.刪除
storage.removeItem("age");
5.修改：
用同一個鍵去賦不同的值就是修改
6.清除全部
storage.clear();
7.獲取所有的鍵值
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
}
【注意】 localstorage只能儲存字串,如果將物件或者陣列放入，取出來時是string類的資料。
如果要儲存物件或陣列，則先將物件或者陣列轉為json的字串，然後再儲存，需要時，取出並將其轉為物件或陣列使用、。
儲存事件：永久儲存的
同源性：
不同的域名下儲存的資料是不共同的。
共同點：
都是將資料儲存在本地中
只能儲存字串
區別：
localstorage 永久儲存的 除非手動刪除
sessionstorage 會話快取
會話結束時失效
1.程式碼控制結束
2.瀏覽器關閉/視窗關閉
cookie:
用來儲存瀏覽器端的本地資料
特點：
1.按照域名來儲存的
不同的域名下的cookie資料不共通。
2.有儲存的路徑
127.0.0.1:8080/a/b.html cookie /a/b /
127.0.0.1:8080/b/b.html cookie /b/b
3.cookie 儲存的資料格式
“鍵1=值1;鍵2=值2”
儲存大小
4KB 50條左右
5.時效性：
預設是會話級別
我們可以手動設定cookie的過期時間
6.操作許可權
前端可以操作
後端可以操作
7.傳送請求時，cookie中的資料會被自動傳輸到後端
8.cookie只能在域名環境下才可以使用
使用方法：
增 （寫入）
document.cookie = "鍵=值";
增加時一次只能增加一條
查（讀取）
document.cookie
一次時獲取cookie中的所有內容
改
同一域名下
document.cookie = "鍵=新值";
刪
沒有刪除方法，有過期時間
如果要刪除，則將該資料的有效期設定為過期即可。
有效期設定：
document.cookie = "鍵=值;expires="+日期;
伺服器的時間以格林威治事件為準的
toUTCString() 轉換為格林威治時間
設定cookie
function setCookie(name, value, expires) {
if (expires == null) {
document.cookie = name + "=" + value;
} else {
var exDate = new Date();
exDate.setHours(exDate.getHours() - 8);
exDate.setTime(exDate.getTime() + 1000 * expires);
document.cookie = name + "=" + value + ";expires =" + exDate;
}
}
獲取cookie
方法1 分割字串
function getCookie(key) {
if (document.cookie.length > 0) {
var arr = document.cookie.split(";");
for (var i = 0; i < arr.length; i++) {
// 分割完以後有空格，必須刪除
var t = arr[i].trim().split('=');
if (t[0] == key) {
return t[1];
}
}
}
}
方法2 利用indexOf和substring。
function getCookie(key) {
if (document.cookie.length > 0) {
if (document.cookie.indexOf(key)==0) {
var start = key.length + 1;
var end = document.cookie.indexOf(';',start);
if (end == -1) {
end = document.cookie.length;
}
return document.cookie.substring(key.length + 1,end);
}
var start = document.cookie.indexOf('; '+ key +'=' )+2;
if (start != 1) {
var end = document.cookie.indexOf(";", start);
if (end == -1) {
end = document.cookie.length;
}
return document.cookie.substring(start + key.length + 1, end);
}
}
return "";
}