一篇了解JSON與數(shù)據(jù)存儲(chǔ)基礎(chǔ)知識(shí)
JSON
JSON的由來
在目前的開發(fā)中,JSON是一種非常重要的數(shù)據(jù)格式,它并不是編程語言,而是一種可以在服務(wù)器和客戶端之間傳輸?shù)臄?shù)據(jù)格式。
JSON的全稱是JavaScript Object Notation(JavaScript對象符號(hào)):
- JSON是由Douglas Crockford構(gòu)想和設(shè)計(jì)的一種輕量級資料交換格式,算是JavaScript的一個(gè)子集;
- 但是雖然JSON被提出來的時(shí)候是主要應(yīng)用JavaScript中,但是目前已經(jīng)獨(dú)立于編程語言,可以在各個(gè)編程語言中使用;
- 很多編程語言都實(shí)現(xiàn)了將JSON轉(zhuǎn)成對應(yīng)模型的方式;
其他的傳輸格式:
- XML:在早期的網(wǎng)絡(luò)傳輸中主要是使用XML來進(jìn)行數(shù)據(jù)交換的,但是這種格式在解析、傳輸?shù)雀鞣矫娑既跤贘SON,所以目前已經(jīng)很少在被使用了;
- Protobuf:另外一個(gè)在網(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作為存儲(chǔ)格式
JSON的基本用法
JSON的頂層支持三種類型的值:
- 簡單值:數(shù)字(Number)、字符串(String,不支持單引號(hào))、布爾類型(Boolean)、null類型;
- 對象值:由key、value組成,key是字符串類型,并且必須添加雙引號(hào),值可以是簡單值、對象值、數(shù)組值;
- 數(shù)組值:數(shù)組的值可以是簡單值、對象值、數(shù)組值
對象形式的JSON,每個(gè)對象屬性也必須是字符串,加上雙引號(hào)。
JSON序列化方法
某些情況下我們希望將JavaScript中的復(fù)雜類型轉(zhuǎn)化成JSON格式的字符串,這樣方便對其進(jìn)行處理:
- 比如我們希望將一個(gè)對象保存到localStorage中;
- 但是如果我們直接存放一個(gè)對象,這個(gè)對象會(huì)被轉(zhuǎn)化成 [object Object] 格式的字符串,并不是我們想要的結(jié)果
在ES5中引用了JSON全局對象,該對象有兩個(gè)常用的方法:
- 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的第一個(gè)參數(shù)傳入的是需要JSON序列化的對象,第二個(gè)參數(shù)傳入的是一個(gè)函數(shù)或者數(shù)組,如果傳入的是數(shù)組,那么僅僅會(huì)替換數(shù)組包含的屬性,如果傳入的是函數(shù),那么可以選擇性的替換值。第三個(gè)參數(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第二個(gè)參數(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方法,那么會(huì)直接使用toJSON方法的結(jié)果。
數(shù)據(jù)存儲(chǔ)Storage
認(rèn)識(shí)Storage
WebStorage主要提供了一種機(jī)制,可以讓瀏覽器提供一種比cookie更直觀的key、value存儲(chǔ)方式:
- localStorage:本地存儲(chǔ),提供的是一種永久性的存儲(chǔ)方法,在關(guān)閉掉網(wǎng)頁重新打開時(shí),存儲(chǔ)的內(nèi)容依然保留;
- sessionStorage:會(huì)話存儲(chǔ),提供的是本次會(huì)話的存儲(chǔ),在關(guān)閉掉會(huì)話時(shí),存儲(chǔ)的內(nèi)容會(huì)被清除
localStorage和sessionStorage
那么它們有什么區(qū)別呢?
驗(yàn)證一:關(guān)閉網(wǎng)頁后重新打開,localStorage會(huì)保留,而sessionStorage會(huì)被刪除;
驗(yàn)證二:在頁面內(nèi)實(shí)現(xiàn)跳轉(zhuǎn),localStorage會(huì)保留,sessionStorage也會(huì)保留;
驗(yàn)證三:在頁面外實(shí)現(xiàn)跳轉(zhuǎn)(打開新的網(wǎng)頁),localStorage會(huì)保留,sessionStorage不會(huì)被保留
Storage的常見方法和屬性
Storage有如下的屬性和方法:
屬性:
Storage.length:只讀屬性 返回一個(gè)整數(shù),表示存儲(chǔ)在Storage對象中的數(shù)據(jù)項(xiàng)數(shù)量;
方法:
- Storage.key():該方法接受一個(gè)數(shù)值n作為參數(shù),返回存儲(chǔ)中的第n個(gè)key名稱;
- Storage.getItem():該方法接受一個(gè)key作為參數(shù),并且返回key對應(yīng)的value;
- Storage.setItem():該方法接受一個(gè)key和value,并且將會(huì)把key和value添加到存儲(chǔ)中。如果key存儲(chǔ),則更新其對應(yīng)的值;
- Storage.removeItem():該方法接受一個(gè)key作為參數(shù),并把該key從存儲(chǔ)中刪除;
- Storage.clear():該方法的作用是清空存儲(chǔ)中的所有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ǔ)基礎(chǔ)知識(shí)的詳細(xì)內(nèi)容,更多關(guān)于JSON與數(shù)據(jù)存儲(chǔ)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點(diǎn)
這篇文章主要介紹了使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點(diǎn),需要的朋友可以參考下2016-10-10js解析與序列化json數(shù)據(jù)(一)json.stringify()的基本用法
對象有兩個(gè)方法:stringify()和parse()。在最簡單的情況下,這兩個(gè)方法分別用于把JavaScript對象序列化為JSON字符串和把JSON字符串解析為原生JavaScript2013-02-02