JS中Json字符串+Cookie+localstorage怎么用

這篇文章給大家分享的是有關(guān)JS中Json字符串+Cookie+localstorage怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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)我們打印的結(jié)果中；

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

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

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

2.Cookie

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

2.1怎么用？

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

例子看看：

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

結(jié)果如下：

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

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

結(jié)果如下：

吃了一段時間土豆我發(fā)現(xiàn)土豆也不好了，我不想要了，怎么辦？那么我們怎么來刪除呢？其實(shí)細(xì)心的朋友發(fā)現(xiàn)那里有個會話級別的，我們可以設(shè)置一個有效期，這個日期是過期的時間就可以了，借助expires關(guān)鍵字。

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

3.Localstorage

H5新增了loclstorage和sessionStorage，用于本地存儲。localstorage有效期是永久，sessionStorage有效期是會話級別，這里我們重點(diǎn)說一下loclstorage。

3.1基本使用

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

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

3.2案例（記住用戶名和密碼）

需求：用戶輸入用戶名和密碼后，點(diǎn)擊復(fù)選框勾選記住用戶名和密碼，下次登陸時就不需要重復(fù)輸入。

用戶名：<input type="text" id="username">
  <br>
  密&nbsp;&nbsp;&nbsp;碼：<input type="password" id="pwd">
  <br>
  <span >記住用戶名密碼：</span> 
  <input type="checkbox" id="remember">

// 復(fù)選框
    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");
      //復(fù)選框默認(rèn)選中
      remember.checked = true;
    }

效果： 一旦我們輸入密碼和用戶名后，點(diǎn)擊了復(fù)選框，我們下次進(jìn)來的時候都不用再次輸入，因?yàn)閿?shù)據(jù)是保存在這里的↓

感謝各位的閱讀！關(guān)于“JS中Json字符串+Cookie+localstorage怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！