目錄

• 1.on字串
• 1.1Json語法
  
• 1.2舉例
  
• 2.Cookie
• 2.1怎麼用？
  
• 3.Localstorage
• 3.1基本使用
  
• 3.2案例（記住使用者名稱和密碼）
  

1.Json字串

Json主要用於前後端互動，是一種資料格式，相較於Xml，使用起來更加便捷

1.1Json語法

可以用來表示：物件、陣列、簡單資料型別等

• {}表示物件 ，[]表示陣列
• 鍵與值之間用 :隔開，鍵與鍵之間用,隔開，屬性名必須使用""號
• 值儘量不要用NaN，屬性的最後一位如果沒有其他屬性，不要留,
  

Json與物件間的轉換：

JSON字串轉物件
        `JSON.parse(JSON字串)  會返回轉換好的js物件`

     物件轉JSON字串
        `JSON.stringify()用於將一個值轉為JSON字串`

1.2舉例

//物件形式的“字串”資料轉json物件
 let s = `{"name":"洋蔥","age":18}`;
 console.log(s)//  字串=>  {"name":"洋蔥","age":18}
 console.log(JSON.parse(s));// //物件：object
//陣列形式的“字串”資料轉json物件
 let s = `[1,5,8,9]`;
 console.log(s);//字串=>  [1,9]
 console.log(JSON.parse(s));//www.cppcns.com
 
物件：object
 -----------------------------------------------------------------------
 //物件轉json字串
 let s = {"name":"洋蔥","age":18};
 console.log(JSON.stringify(s));//字串=>  {"name":"洋蔥","age":18}
 //陣列轉json字串
  let s = [1,9];
   console.log(JSON.stringify(s));//字串=>   [1,9]

注意：

• 轉換時，物件的函式會被過濾掉不會體現我們列印的結果中；
• 深拷貝時候可以先將物件轉為字串，然後再轉回物件;
• Json不能儲存Data物件，同一個物件中不要出現兩個同名屬性；
• 預設情況下JSON.stringify()輸出的字串不會存在空格字元和縮排字元
  

2.Cookie

Cookie是記錄瀏覽器中的使用者資訊，頁面在伺服器環境下開啟，我們通過設定便可以獲取使用者的操作資訊。比如：登陸時的記住使用者密碼、個人淘寶賬號上的購物車中的資訊等等。Cookie的有效期可以使會話級別的也可以是長期有效的也可以是設定期限的

2.1怎麼用？

• 我們可以通過doucument.cookie來建立、刪除、修改、讀取。
  

例子看看：

document.cookie = "name=洋蔥";
document.cookie = "age=18";

結果如下：

我們發現洋蔥太辣了我想換個土豆來：

**document.cookie = "name=洋蔥";
document.cookihttp://www.cppcns.come = "name=土豆";
document.cookie = "age=18";

結果如下：

吃了一段時間土豆我發現土豆也不好了，我不想要了，怎麼辦？那麼我們怎麼來刪除呢？其實細心的朋友發現那裡有個會話級別的，我們可以設定一個有效期，這個日期是過期的時間就可以了，藉助expires關鍵字。

 document.cookie = "name=土豆;expires="+new Date('2021/11/25 03:58:20');

3.Localstorage

H5新增了loclstorage和sessionStorage，用於本地儲存。localstorage有效期是永久，sessionStorage有效期是會話級別，這裡我們重點說一下loclstorage。

3.1基本使用

使用window.localstorage來操作localstorage(window可省略)

//新增  setItem
localStorage.setItem("name","洋蔥");
//獲取  getItem
localStorage.getItem("name","洋蔥");
//刪除  removeItem("鍵值對")
localStorage.removeItem("name");
//清空  clear
localStorage.clear();

3.2案例（記住使用者名稱和密碼）

需求：使用者輸入使用者名稱和密碼後，點選複選框勾選記住使用者名稱和密碼，下次登陸時就不需要重複輸入。

使用者名稱：<input type="text" id="username">
  <br>
  密&nbsp;&nbsp;&nbsp;碼：<input type="password" id="pwd">
  <br>
  <span style="font-size: 14px;">記住使用者名稱密碼：</span> 
  <input type="checkbox" id="remember">

    // 複選框
    const remember = docrbwHvRzJrwument.getElementById('remember');
    //使用者名稱
    const username = document.getElementById('username');
    //密碼
    const pwd = document.getElementById('pwd');
      
    remember.onclick = function(){
      if (remember.checked) {
        //選中，將使用者名稱和密碼放入本地儲存。
        localStorage.setItem("username",username.value);
        localStorage.setItem("pwd",pwd.value);
      } else {
        // 從選中變成了未選中，將使用者名稱和密碼從本地儲存中刪除
        localStorage.removeItem("username");
        localStorage.removeItem("pwd");
      }
      console.log();
    }
    //每次重新開啟頁面後，判斷本地儲存中有沒有值
    if (localStorage.getItem("username")) {
      //有值，將值寫入輸入框。
      username.value = localStorage.getItem("username")
      pwd.value = localStorage.getItem("pwd");
      //複選框預設選中
      remember.checked = true;
    }

效果： 一旦我們輸入密碼和使用者名稱後，點選了複選框，我們下次進來的時候都不用再次輸入，因為資料是儲存在這裡的↓

到此這篇關於JS 中Json字串+Cookie+localstorage的文章就介紹到這了,更多相關Json字串+Cookie+localstorage內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！