JS 中Json字符串+Cookie+localstorage

Posted on by

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,5,8,9]
 console.log(JSON.parse(s));//對象：object
 -----------------------------------------------------------------------
 //對象轉json字符串
 let s = {"name":"洋蔥","age":18};
 console.log(JSON.stringify(s));//字符串=>  {"name":"洋蔥","age":18}
 //數組轉json字符串
  let s = [1,5,8,9];
   console.log(JSON.stringify(s));//字符串=>   [1,5,8,9]

註意：

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

2.Cookie

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

2.1怎麼用？

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

例子看看：

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

結果如下：

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

**document.cookie = "name=洋蔥";
document.cookie = "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 = document.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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：