欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一篇了解JSON與數(shù)據(jù)存儲(chǔ)基礎(chǔ)知識(shí)

 更新時(shí)間:2023年01月08日 11:07:44   作者:既白biu  
這篇文章主要介紹了JSON與數(shù)據(jù)存儲(chǔ)基礎(chǔ)知識(shí),本篇文章較為基礎(chǔ),但非常詳細(xì),可以很好的理解JSON和數(shù)據(jù)存儲(chǔ),,需要的朋友可以參考下

JSON

JSON的由來(lái)

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

JSON的全稱是JavaScript Object Notation(JavaScript對(duì)象符號(hào)):

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

其他的傳輸格式:

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

目前JSON被使用的場(chǎng)景也越來(lái)越多:

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

JSON的基本用法

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

  • 簡(jiǎn)單值:數(shù)字(Number)、字符串(String,不支持單引號(hào))、布爾類型(Boolean)、null類型;
  • 對(duì)象值:由key、value組成,key是字符串類型,并且必須添加雙引號(hào),值可以是簡(jiǎn)單值、對(duì)象值、數(shù)組值;
  • 數(shù)組值:數(shù)組的值可以是簡(jiǎn)單值、對(duì)象值、數(shù)組值

對(duì)象形式的JSON,每個(gè)對(duì)象屬性也必須是字符串,加上雙引號(hào)。

JSON序列化方法

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

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

在ES5中引用了JSON全局對(duì)象,該對(duì)象有兩個(gè)常用的方法:

  • stringify方法:將JavaScript類型轉(zhuǎn)成對(duì)應(yīng)的JSON字符串;
  • parse方法:解析JSON字符串,轉(zhuǎn)回對(duì)應(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序列化的對(duì)象,第二個(gè)參數(shù)傳入的是一個(gè)函數(shù)或者數(shù)組,如果傳入的是數(shù)組,那么僅僅會(huì)替換數(shù)組包含的屬性,如果傳入的是函數(shù),那么可以選擇性的替換值。第三個(gè)參數(shù)可傳入數(shù)字或者字符串,傳入數(shù)字的值為多少,就表示JSON序列化后里面的屬性前面的空格為多少,如果傳入的是字符串,則表示屬性前面以該字符串開(kāi)頭。如下例:

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

// 需求: 將上面的對(duì)象轉(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]
    //   }

如果對(duì)象本身包含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)頁(yè)重新打開(kāi)時(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)頁(yè)后重新打開(kāi),localStorage會(huì)保留,而sessionStorage會(huì)被刪除;
驗(yàn)證二:在頁(yè)面內(nèi)實(shí)現(xiàn)跳轉(zhuǎn),localStorage會(huì)保留,sessionStorage也會(huì)保留;
驗(yàn)證三:在頁(yè)面外實(shí)現(xiàn)跳轉(zhuǎn)(打開(kāi)新的網(wǎng)頁(yè)),localStorage會(huì)保留,sessionStorage不會(huì)被保留

Storage的常見(jiàn)方法和屬性

Storage有如下的屬性和方法:

屬性:

Storage.length:只讀屬性 返回一個(gè)整數(shù),表示存儲(chǔ)在Storage對(duì)象中的數(shù)據(jù)項(xiàng)數(shù)量;

方法:

  • Storage.key():該方法接受一個(gè)數(shù)值n作為參數(shù),返回存儲(chǔ)中的第n個(gè)key名稱;
  • Storage.getItem():該方法接受一個(gè)key作為參數(shù),并且返回key對(duì)應(yīng)的value;
  • Storage.setItem():該方法接受一個(gè)key和value,并且將會(huì)把key和value添加到存儲(chǔ)中。如果key存儲(chǔ),則更新其對(duì)應(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ǔ)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • json 介紹 js簡(jiǎn)單實(shí)例

    json 介紹 js簡(jiǎn)單實(shí)例

    json全稱是JavaScript Object Notation(javaScript對(duì)象符號(hào))。JSON是一種結(jié)構(gòu)化的,輕量級(jí)的,完全獨(dú)立于語(yǔ)言的.基于文本的數(shù)據(jù)傳輸格式,在許多場(chǎng)合下用來(lái)替代xml文件格式。
    2009-12-12
  • 正則表達(dá)式搭配js輕松處理json文本方便而老古

    正則表達(dá)式搭配js輕松處理json文本方便而老古

    如何解析Json已經(jīng)成為了眾多業(yè)內(nèi)人士談?wù)摰慕裹c(diǎn),依我看,要解析輕量化類型json,用.net自帶的類庫(kù)就可以勝任了,有一種看起來(lái)更方便的老古董——正則表達(dá)式,處理json是綽綽有余,感興趣的你可不要錯(cuò)過(guò)了哈
    2013-02-02
  • XML的代替者----JSON

    XML的代替者----JSON

    XML的代替者----JSON...
    2007-07-07
  • IE8 原生JSON支持

    IE8 原生JSON支持

    你可能已經(jīng)從這篇文章的標(biāo)題中猜到了,Internet Explorer 8(目前是Beta2)提供了原生JSON的解析和序列化。
    2009-04-04
  • 簡(jiǎn)明json介紹

    簡(jiǎn)明json介紹

    不要認(rèn)為JSON是種新的應(yīng)用 ,其實(shí)JSON就是javascript支持的一種對(duì)象直接量。
    2008-09-09
  • 一文了解什么是JWT

    一文了解什么是JWT

    JSON?WEB?Token是一種基于JSON的、用于在網(wǎng)絡(luò)上聲明某種主張的令牌,由三部分組成:?頭信息,?消息體和簽名,下面就一起來(lái)了解一下什么是JWT
    2023-05-05
  • 使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點(diǎn)

    使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點(diǎn)

    這篇文章主要介紹了使用JSON作為函數(shù)的參數(shù)的優(yōu)缺點(diǎn),需要的朋友可以參考下
    2016-10-10
  • 用 JSON 處理緩存

    用 JSON 處理緩存

    用 JSON 處理緩存...
    2007-04-04
  • 理解JSON:3分鐘課程

    理解JSON:3分鐘課程

    如果你跟我一樣(我擔(dān)心你就是),那么,到目前為止,這應(yīng)該是你對(duì)JSON的經(jīng)驗(yàn)
    2011-10-10
  • js解析與序列化json數(shù)據(jù)(一)json.stringify()的基本用法

    js解析與序列化json數(shù)據(jù)(一)json.stringify()的基本用法

    對(duì)象有兩個(gè)方法:stringify()和parse()。在最簡(jiǎn)單的情況下,這兩個(gè)方法分別用于把JavaScript對(duì)象序列化為JSON字符串和把JSON字符串解析為原生JavaScript
    2013-02-02

最新評(píng)論