JS?中Json字符串+Cookie+localstorage

更新時間：2021年12月06日 10:30:54 作者：Onion韓

這篇文章主要介紹了JS?中Json字符串+Cookie+localstorage，Json主要用于前后端交互，是一種數(shù)據(jù)格式，相較于Xml，使用起來更加便捷，下面文章將對他們詳細介紹,需要的朋友可以參考一下

1.Json字符串

Json主要用于前后端交互，是一種數(shù)據(jù)格式，相較于Xml，使用起來更加便捷

1.1Json語法

可以用來表示：對象、數(shù)組、簡單數(shù)據(jù)類型等

{}表示對象，[]表示數(shù)組
鍵與值之間用 :隔開，鍵與鍵之間用,隔開，屬性名必須使用""號
值盡量不要用NaN，屬性的最后一位如果沒有其他屬性，不要留,

Json與對象間的轉(zhuǎn)換：

JSON字符串轉(zhuǎn)對象
        `JSON.parse(JSON字符串)  會返回轉(zhuǎn)換好的js對象`

     對象轉(zhuǎn)JSON字符串
        `JSON.stringify()用于將一個值轉(zhuǎn)為JSON字符串`

1.2舉例

//對象形式的“字符串”數(shù)據(jù)轉(zhuǎn)json對象
 let s = `{"name":"洋蔥","age":18}`;
 console.log(s)//  字符串=>  {"name":"洋蔥","age":18}
 console.log(JSON.parse(s));// //對象：object
//數(shù)組形式的“字符串”數(shù)據(jù)轉(zhuǎn)json對象
 let s = `[1,5,8,9]`;
 console.log(s);//字符串=>  [1,5,8,9]
 console.log(JSON.parse(s));//對象：object
 -----------------------------------------------------------------------
 //對象轉(zhuǎn)json字符串
 let s = {"name":"洋蔥","age":18};
 console.log(JSON.stringify(s));//字符串=>  {"name":"洋蔥","age":18}
 //數(shù)組轉(zhuǎn)json字符串
  let s = [1,5,8,9];
   console.log(JSON.stringify(s));//字符串=>   [1,5,8,9]

注意：

轉(zhuǎn)換時，對象的函數(shù)會被過濾掉不會體現(xiàn)我們打印的結果中；

深拷貝時候可以先將對象轉(zhuǎn)為字符串，然后再轉(zhuǎn)回對象;

Json不能存儲Data對象，同一個對象中不要出現(xiàn)兩個同名屬性；

默認情況下JSON.stringify()輸出的字符串不會存在空格字符和縮進字符

2.Cookie

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

2.1怎么用？

我們可以通過doucument.cookie來創(chuàng)建、刪除、修改、讀取。

例子看看：

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

結果如下：

我們發(fā)現(xiàn)洋蔥太辣了我想換個土豆來：

**document.cookie = "name=洋蔥";
document.cookie = "name=土豆";
document.cookie = "age=18";

結果如下：

吃了一段時間土豆我發(fā)現(xiàn)土豆也不好了，我不想要了，怎么辦？那么我們怎么來刪除呢？其實細心的朋友發(fā)現(xiàn)那里有個會話級別的，我們可以設置一個有效期，這個日期是過期的時間就可以了，借助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;
    }