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

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

• JSON是由Douglas Crockford構想和設計的一種輕量級資料交換格式，算是JavaScript的一個子集；
• 但是雖然JSON被提出來的時候是主要應用JavaScript中，但是目前已經獨立于編程語言，可以在各個編程語言中使用；
• 很多編程語言都實現了將JSON轉成對應模型的方式；

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

• 網絡數據的傳輸JSON數據；
• 項目的某些配置文件；
• 非關系型數據庫（NoSQL）將json作為存儲格式；

一、JSON基本語法

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

• 簡單值：數字（Number）、字符串（String，不支持單引號）、布爾類型（Boolean）、null類型；
  

• 對象值：由key、value組成，key是字符串類型，并且必須添加雙引號，值可以是簡單值、對象值、數組值；
  

• 數組值：數組的值可以是簡單值、對象值、數組值；
  

二、JSON序列化

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

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

三、JSON序列化方法

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

• stringify方法：將JavaScript類型轉成對應的JSON字符串；
• parse方法：解析JSON字符串，轉回對應的JavaScript類型；

四、Stringify的參數replace、space

JSON.stringify() 方法將一個 JavaScript 對象或值轉換為 JSON 字符串：

• 如果第二個參數指定了一個 replacer 函數，則可以選擇性地替換值；
• 如果第二個參數指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性；

它還可以跟上第三個參數space：

如果對象本身包含toJSON方法，那么會直接使用toJSON方法的結果：

五、parse方法

JSON.parse() 方法用來解析JSON字符串，構造由字符串描述的JavaScript值或對象。

• 提供可選的 reviver 函數用以在返回之前對所得到的對象執行變換(操作)。
  

六、使用JSON序列化深拷貝

另外我們生成的新對象和之前的對象并不是同一個對象：

• 相當于是進行了一次深拷貝；
  
  注意：這種方法它對函數是無能為力的
• 創建出來的info中是沒有foo函數的，這是因為stringify并不會對函數進行處理；
• 我們后續會講解如何編寫深拷貝的工具函數，那么這樣就可以對函數的拷貝進行處理了；

七、認識Storage

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

• localStorage：本地存儲，提供的是一種永久性的存儲方法，在關閉掉網頁重新打開時，存儲的內容依然保留；
  

• sessionStorage：會話存儲，提供的是本次會話的存儲，在關閉掉會話時，存儲的內容會被清除；
  

八、localStorage和sessionStorage的區別

我們會發現localStorage和sessionStorage看起來非常的相似。
那么它們有什么區別呢？

• 驗證一：關閉網頁后重新打開，localStorage會保留，而sessionStorage會被刪除；
• 驗證二：在頁面內實現跳轉，localStorage會保留，sessionStorage也會保留；
• 驗證三：在頁面外實現跳轉（打開新的網頁），localStorage會保留，sessionStorage不會被保留；

九、Storage常見的方法和屬性

十、封裝Storage

在開發中，為了讓我們對Storage使用更加方便，我們可以對其進行一些封裝：

class HYCache {constructor(isLocal = true) {this.storage = isLocal ? localStorage: sessionStorage}setItem(key, value) {if (value) {this.storage.setItem(key, JSON.stringify(value))}}getItem(key) {let value = this.storage.getItem(key)if (value) {value = JSON.parse(value)return value} }removeItem(key) {this.storage.removeItem(key)}clear() {this.storage.clear()}key(index) {return this.storage.key(index)}length() {return this.storage.length} }const localCache = new HYCache() const sessionCache = new HYCache(false)export {localCache,sessionCache }

十一、認識IndexedDB

什么是IndexedDB呢？

• 我們能看到DB這個詞，就說明它其實是一種數據庫（Database），通常情況下在服務器端比較常見；
• 在實際的開發中，大量的數據都是存儲在數據庫的，客戶端主要是請求這些數據并且展示；
• 有時候我們可能會存儲一些簡單的數據到本地（瀏覽器中），比如token、用戶名、密碼、用戶信息等，比較少存儲大量的數據；
• 那么如果確實有大量的數據需要存儲，這個時候可以選擇使用IndexedDB；

IndexedDB是一種底層的API，用于在客戶端存儲大量的結構化數據。

• 它是一種事務型數據庫系統，是一種基于JavaScript面向對象數據庫，有點類似于NoSQL（非關系型數據庫）；
• IndexDB本身就是基于事務的，我們只需要指定數據庫模式，打開與數據庫的連接，然后檢索和更新一系列事務即可；
  

11.1 IndexDB的連接數據庫

// 打開數據(和數據庫建立連接) const dbRequest = indexedDB.open("why", 3) dbRequest.onerror = function(err) {console.log("打開數據庫失敗~") } let db = null dbRequest.onsuccess = function(event) {db = event.target.result } // 第一次打開/或者版本發生升級 dbRequest.onupgradeneeded = function(event) {const db = event.target.resultconsole.log(db)// 創建一些存儲對象db.createObjectStore("users", { keyPath: "id" }) }class User {constructor(id, name, age) {this.id = idthis.name = namethis.age = age} } const users = [new User(100, "why", 18),new User(101, "kobe", 40),new User(102, "james", 30), ]// 獲取btns, 監聽點擊 const btns = document.querySelectorAll("button") for (let i = 0; i < btns.length; i++) {btns[i].onclick = function() {const transaction = db.transaction("users", "readwrite")console.log(transaction)const store = transaction.objectStore("users")switch(i) {case 0:console.log("點擊了新增")for (const user of users) {const request = store.add(user)request.onsuccess = function() {console.log(`${user.name}插入成功`)}}transaction.oncomplete = function() {console.log("添加操作全部完成")}breakcase 1:console.log("點擊了查詢")// 1.查詢方式一(知道主鍵, 根據主鍵查詢)// const request = store.get(102)// request.onsuccess = function(event) {// console.log(event.target.result)// }// 2.查詢方式二:const request = store.openCursor()request.onsuccess = function(event) {const cursor = event.target.resultif (cursor) {if (cursor.key === 101) {console.log(cursor.key, cursor.value)} else {cursor.continue()}} else {console.log("查詢完成")}}breakcase 2:console.log("點擊了刪除")const deleteRequest = store.openCursor()deleteRequest.onsuccess = function(event) {const cursor = event.target.resultif (cursor) {if (cursor.key === 101) {cursor.delete()} else {cursor.continue()}} else {console.log("查詢完成")}}breakcase 3:console.log("點擊了修改")const updateRequest = store.openCursor()updateRequest.onsuccess = function(event) {const cursor = event.target.resultif (cursor) {if (cursor.key === 101) {const value = cursor.value;value.name = "curry"cursor.update(value)} else {cursor.continue()}} else {console.log("查詢完成")}}break}} }

十二、認識Cookie

Cookie（復數形態Cookies），又稱為“小甜餅”。類型為“小型文本文件，某些網站為了辨別用戶身份而存儲在用戶本地終端（Client
Side）上的數據。

• 瀏覽器會在特定的情況下攜帶上cookie來發送請求，我們可以通過cookie來獲取一些信息；

Cookie總是保存在客戶端中，按在客戶端中的存儲位置，Cookie可以分為內存Cookie和硬盤Cookie。

• 內存Cookie由瀏覽器維護，保存在內存中，瀏覽器關閉時Cookie就會消失，其存在時間是短暫的；
• 硬盤Cookie保存在硬盤中，有一個過期時間，用戶手動清理或者過期時間到時，才會被清理；

如何判斷一個cookie是內存cookie還是硬盤cookie呢？

• 沒有設置過期時間，默認情況下cookie是內存cookie，在關閉瀏覽器時會自動刪除；
• 有設置過期時間，并且過期時間不為0或者負數的cookie，是硬盤cookie，需要手動或者到期時，才會刪除；

12.1 cookie常見的屬性

12.2 客戶端設置cookie

總結

以上是生活随笔為你收集整理的JS高级——JSON、数据存储学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。