欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS?中Json字符串+Cookie+localstorage

 更新時(shí)間：2021年12月06日 10:30:54   作者：Onion韓  
這篇文章主要介紹了JS?中Json字符串+Cookie+localstorage，Json主要用于前后端交互，是一種數(shù)據(jù)格式，相較于Xml，使用起來更加便捷，下面文章將對(duì)他們詳細(xì)介紹,需要的朋友可以參考一下

1.Json字符串

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

1.1Json語法

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

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

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

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

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

1.2舉例

//對(duì)象形式的“字符串”數(shù)據(jù)轉(zhuǎn)json對(duì)象
 let s = `{"name":"洋蔥","age":18}`;
 console.log(s)//  字符串=>  {"name":"洋蔥","age":18}
 console.log(JSON.parse(s));// //對(duì)象：object
//數(shù)組形式的“字符串”數(shù)據(jù)轉(zhuǎn)json對(duì)象
 let s = `[1,5,8,9]`;
 console.log(s);//字符串=>  [1,5,8,9]
 console.log(JSON.parse(s));//對(duì)象：object
 -----------------------------------------------------------------------
 //對(duì)象轉(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í)，對(duì)象的函數(shù)會(huì)被過濾掉不會(huì)體現(xiàn)我們打印的結(jié)果中；
  • 深拷貝時(shí)候可以先將對(duì)象轉(zhuǎn)為字符串，然后再轉(zhuǎn)回對(duì)象;
  • Json不能存儲(chǔ)Data對(duì)象，同一個(gè)對(duì)象中不要出現(xiàn)兩個(gè)同名屬性；
  • 默認(rèn)情況下JSON.stringify()輸出的字符串不會(huì)存在空格字符和縮進(jìn)字符

2.Cookie

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

2.1怎么用？

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

例子看看：

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

結(jié)果如下：

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

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

結(jié)果如下：

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

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

3.Localstorage

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

3.1基本使用

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

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

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

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

用戶名：<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">

    // 復(fù)選框
    const remember = document.getElementById('remember');
    //用戶名
    const username = document.getElementById('username');
    //密碼
    const pwd = document.getElementById('pwd');
      
    remember.onclick = function(){
      if (remember.checked) {
        //選中，將用戶名和密碼放入本地存儲(chǔ)。
        localStorage.setItem("username",username.value);
        localStorage.setItem("pwd",pwd.value);
      } else {
        // 從選中變成了未選中，將用戶名和密碼從本地存儲(chǔ)中刪除
        localStorage.removeItem("username");
        localStorage.removeItem("pwd");
      }
      console.log();
    }
    //每次重新打開頁面后，判斷本地存儲(chǔ)中有沒有值
    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)來的時(shí)候都不用再次輸入，因?yàn)閿?shù)據(jù)是保存在這里的↓

到此這篇關(guān)于JS 中Json字符串+Cookie+localstorage的文章就介紹到這了,更多相關(guān)Json字符串+Cookie+localstorage內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論