js json的格式、儲存與傳送
1.Json的格式
其實json就是物件。源生的js程式碼並沒有類的概念。物件救就是object。物件有自己的屬性，也可以有自己的方法。json是一種輕量級的儲存和交換資訊的語言。他有自己的格式。
較為簡單的json。裡面只有簡單的物件，key+value的形式：
var CellInfo = { "CellId": document.getElementById("CellId").value, "UEAmount": document.getElementById("UE value").innerText, "BearAddDel": document.getElementById("bearvalue").innerText, "UEAttachDe": document.getElementById("attachvalue").innerText, "TotalDLTP": document.getElementById("dlvalue").innerText, "TotalULTP": document.getElementById("ulvalue").innerText, };
每個元素之間用逗號隔開。呼叫每個key的值可用語句。例如：CellInfo.UEAmunt，就可取出其中的值。
較為複雜的json。裡面包含了物件。
var UEGroup1 = { "UEAmount": ua[1], "DBR1": { "DLPackageSize": DS[1], "ULPackageSize": US[1], "DLTP": DP[1], "ULTP": UP[1], "QCI": QCI[0] }, "DBR2": { "DLPackageSize": DS[2], "ULPackageSize": US[2], "DLTP": DP[2], "ULTP": UP[2], "QCI": QCI[1] }, "DBR3": { "DLPackageSize": DS[3], "ULPackageSize": US[3], "DLTP": DP[3], "ULTP": UP[3], "QCI": QCI[2] } };
例如這個UEGroup1，裡面的元素不僅有簡單的key+value，還包含了三個物件。物件裡的元素用{}括起來，彼此之間用逗號隔開。想具體訪問某個元素的值也是通過逐層key，例如：UEGrooup1.DBR1.DLPackageSize
動態的往json只增加元素，增加物件。
前面說的幾個都是靜態的，提前寫好的。那如果臨時想加一個元素，例如在Cellinfo這個json中相加一個number的元素：
CellInfo.number=10;對於往json中新增物件。例如我們想把Cellinfo和UEGroup1這兩個object作為兩個元素加入到另外一個大的json中：
var PETInfo = {};//聲明瞭一個空的物件 var CellInfo = { "CellId": document.getElementById("CellId").value, "UEAmount": document.getElementById("UE value").innerText, "BearAddDel": document.getElementById("bearvalue").innerText, "UEAttachDe": document.getElementById("attachvalue").innerText, "TotalDLTP": document.getElementById("dlvalue").innerText, "TotalULTP": document.getElementById("ulvalue").innerText, }; str_CellInfo = JSON.stringify(CellInfo);//將CellInfo轉為字串物件 PETInfo.CellInfo=str_CellInfo;//在PETInfo中新增名為Cellinfo的屬性，並賦值
2.json的傳送
json寫好後，傳送給後臺。至於後臺怎麼處理資料我們不關心。傳送json的函式如下：
function post(path, params, method) {
method = method || "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}引數分別是後臺的地址，變數，方法。變數就是我們自己寫好的json，方法預設為post。例如我們想發剛剛的PETInfo
$.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);
資料的傳送、並獲取結果的例項：
需求描述：使用者填寫一系列的輸入框，前端獲取資料，封裝成json併發送給伺服器，伺服器會返回一個返回值，表示狀態。前端需要展示這個內容提示客戶。
function sendBook(){
var Book={
"openstackIP":document.getElementById("openstackIP").value,
"RAPName":document.getElementById("RAPName").value,
"RAPVer":document.getElementById("ver").value,
"OAMIP":document.getElementById("OAMIP").value
};//json封裝使用者輸入的資料
$.post('http://10.140.160.64:3012/servers/env/book', Book)//呼叫post傳輸資料
.done((resp) => {//傳輸後獲取伺服器的返回值
alert(resp);//展示返回值
// window.location.href = 'Environment-List.html';//選擇性介面跳轉
});
}3.json在本地的儲存
儲存資料有很多方法。這裡我用的是localStorage。localStorage與cookie的區別如下：
① cookie在瀏覽器與伺服器之間來回傳遞。
sessionStorage和localStorage不會把資料發給伺服器，僅在本地儲存
②資料有效期不同：
cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。
sessionStorage：僅在當前瀏覽器視窗關閉前有效。
localStorage 始終有效，長期儲存。
③cookie資料還有路徑的概念，可以限制cookie只屬於某個路徑下。
儲存大小也不同，cookie資料不能超過4k，sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
④ 作用域不用
sessionStorage不在不同的瀏覽器視窗中共享；
localStorage在所有同源視窗中都是共享的；
cookie也是在所有同源視窗中都是共享的；
WebStorage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。Web Storage 的 api 介面使用更方便。
用localstage儲存json的例項：
str_PETInfo=JSON.stringify(PETInfo);//將json轉為字串物件
window.localStorage.setItem("PET",str_PETInfo);//存入本地，該json的key為PET將json取出來：
var PET=JSON.parse(window.localStorage.getItem("PET"));//將字串轉化為json
var CellInfo=JSON.parse(PET.CellInfo);//json中的Cellinfo物件轉化為json