JSON

JSON的由來

在目前的開發(fā)中，JSON是一種非常重要的數(shù)據(jù)格式，它并不是編程語言，而是一種可以在服務(wù)器和客戶端之間傳輸?shù)臄?shù)據(jù)格式。

JSON的全稱是JavaScript Object Notation（JavaScript對象符號）：

• JSON是由Douglas Crockford構(gòu)想和設(shè)計(jì)的一種輕量級資料交換格式，算是JavaScript的一個子集；
• 但是雖然JSON被提出來的時(shí)候是主要應(yīng)用JavaScript中，但是目前已經(jīng)獨(dú)立于編程語言，可以在各個編程語言中使用；
• 很多編程語言都實(shí)現(xiàn)了將JSON轉(zhuǎn)成對應(yīng)模型的方式；

其他的傳輸格式：

• XML：在早期的網(wǎng)絡(luò)傳輸中主要是使用XML來進(jìn)行數(shù)據(jù)交換的，但是這種格式在解析、傳輸?shù)雀鞣矫娑既跤贘SON，所以目前已經(jīng)很少在被使用了；
• Protobuf：另外一個在網(wǎng)絡(luò)傳輸中目前已經(jīng)越來越多使用的傳輸格式是protobuf，但是直到2021年的3.x版本才支持JavaScript，所以目前在前端使用的較少；

目前JSON被使用的場景也越來越多：

• 網(wǎng)絡(luò)數(shù)據(jù)的傳輸JSON數(shù)據(jù)；
• 項(xiàng)目的某些配置文件；
• 非關(guān)系型數(shù)據(jù)庫（NoSQL）將json作為存儲格式

JSON的基本用法

JSON的頂層支持三種類型的值：

• 簡單值：數(shù)字（Number）、字符串（String，不支持單引號）、布爾類型（Boolean）、null類型；
• 對象值：由key、value組成，key是字符串類型，并且必須添加雙引號，值可以是簡單值、對象值、數(shù)組值；
• 數(shù)組值：數(shù)組的值可以是簡單值、對象值、數(shù)組值

對象形式的JSON，每個對象屬性也必須是字符串，加上雙引號。

JSON序列化方法

某些情況下我們希望將JavaScript中的復(fù)雜類型轉(zhuǎn)化成JSON格式的字符串，這樣方便對其進(jìn)行處理：

• 比如我們希望將一個對象保存到localStorage中；
• 但是如果我們直接存放一個對象，這個對象會被轉(zhuǎn)化成 [object Object] 格式的字符串，并不是我們想要的結(jié)果

在ES5中引用了JSON全局對象，該對象有兩個常用的方法：

• stringify方法：將JavaScript類型轉(zhuǎn)成對應(yīng)的JSON字符串；
• parse方法：解析JSON字符串，轉(zhuǎn)回對應(yīng)的JavaScript類型；

let obj = {
    name: "cy",
    age: 18
}
let newObj = JSON.stringify(obj)
console.log(newObj); //{"name":"cy","age":18}-JSON形式的字符串
newObj = JSON.parse(newObj)
console.log(newObj);//{ name: 'cy', age: 18 }

JSON.stringify的參數(shù)：

JSON.stringify的第一個參數(shù)傳入的是需要JSON序列化的對象，第二個參數(shù)傳入的是一個函數(shù)或者數(shù)組，如果傳入的是數(shù)組，那么僅僅會替換數(shù)組包含的屬性，如果傳入的是函數(shù)，那么可以選擇性的替換值。第三個參數(shù)可傳入數(shù)字或者字符串，傳入數(shù)字的值為多少，就表示JSON序列化后里面的屬性前面的空格為多少，如果傳入的是字符串，則表示屬性前面以該字符串開頭。如下例：

const obj = {
    name: "why",
    age: 18,
    friends: {
        name: "kobe"
    },
    hobbies: ["籃球", "足球"],
    // toJSON: function() {
    //     return "123456"
    // }
}

// 需求: 將上面的對象轉(zhuǎn)成JSON字符串
// 1.直接轉(zhuǎn)化
const jsonString1 = JSON.stringify(obj)
console.log(jsonString1) //{"name":"why","age":18,"friends":{"name":"kobe"},"hobbies":["籃球","足球"]}

// 2.stringify第二個參數(shù)replacer
// 2.1. 傳入數(shù)組: 設(shè)定哪些是需要轉(zhuǎn)換
const jsonString2 = JSON.stringify(obj, ["name", "friends"])
console.log(jsonString2) //{"name":"why","friends":{"name":"kobe"}}

// 2.2. 傳入回調(diào)函數(shù):
const jsonString3 = JSON.stringify(obj, (key, value) => {
    if (key === "age") {
        return value + 1
    }
    return value
})
console.log(jsonString3) //{"name":"why","age":19,"friends":{"name":"kobe"},"hobbies":["籃球","足球"]}

// 3.stringify第三參數(shù) space
const jsonString4 = JSON.stringify(obj, null, "aaa")
console.log(jsonString4)
    // {
    //   aaa"name": "why",
    //   aaa"age": 18,
    //   aaa"friends": {
    //   aaaaaa"name": "kobe"
    //   aaa},
    //   aaa"hobbies": [
    //   aaaaaa"籃球",
    //   aaaaaa"足球"
    //   aaa]
    //   }

如果對象本身包含toJSON方法，那么會直接使用toJSON方法的結(jié)果。

數(shù)據(jù)存儲Storage

認(rèn)識Storage

WebStorage主要提供了一種機(jī)制，可以讓瀏覽器提供一種比cookie更直觀的key、value存儲方式：

• localStorage：本地存儲，提供的是一種永久性的存儲方法，在關(guān)閉掉網(wǎng)頁重新打開時(shí)，存儲的內(nèi)容依然保留；
• sessionStorage：會話存儲，提供的是本次會話的存儲，在關(guān)閉掉會話時(shí)，存儲的內(nèi)容會被清除

localStorage和sessionStorage

那么它們有什么區(qū)別呢？

驗(yàn)證一：關(guān)閉網(wǎng)頁后重新打開，localStorage會保留，而sessionStorage會被刪除；
驗(yàn)證二：在頁面內(nèi)實(shí)現(xiàn)跳轉(zhuǎn)，localStorage會保留，sessionStorage也會保留；
驗(yàn)證三：在頁面外實(shí)現(xiàn)跳轉(zhuǎn)（打開新的網(wǎng)頁），localStorage會保留，sessionStorage不會被保留

Storage的常見方法和屬性

Storage有如下的屬性和方法：

屬性：

Storage.length：只讀屬性 返回一個整數(shù)，表示存儲在Storage對象中的數(shù)據(jù)項(xiàng)數(shù)量；

方法：

• Storage.key()：該方法接受一個數(shù)值n作為參數(shù)，返回存儲中的第n個key名稱；
• Storage.getItem()：該方法接受一個key作為參數(shù)，并且返回key對應(yīng)的value；
• Storage.setItem()：該方法接受一個key和value，并且將會把key和value添加到存儲中。如果key存儲，則更新其對應(yīng)的值；
• Storage.removeItem()：該方法接受一個key作為參數(shù)，并把該key從存儲中刪除；
• Storage.clear()：該方法的作用是清空存儲中的所有key；

// 1.setItem
localStorage.setItem("name", "cy")
localStorage.setItem("age", 18)

// 2.length
console.log(localStorage.length)//2
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    console.log(localStorage.getItem(key))
}
//18
//cy

// 3.key方法
console.log(localStorage.key(0))//age

// 4.getItem(key)
console.log(localStorage.getItem("age"))//18

// 5.removeItem
localStorage.removeItem("age")

// 6.clear方法
localStorage.clear()

以上就是一篇了解JSON與數(shù)據(jù)存儲基礎(chǔ)知識的詳細(xì)內(nèi)容，更多關(guān)于JSON與數(shù)據(jù)存儲的資料請關(guān)注腳本之家其它相關(guān)文章！