JavaScript >> Javascript 文檔 >  >> Tags >> URL

在 JavaScript 中使用 URL 查詢參數緩存數據

如何將數據臨時存儲在 URL 查詢參數中並檢索它並解析它以在您的 UI 中使用。

開始使用

在本教程中,我們將使用 CheatCode 的全棧 JavaScript 框架 Joystick。 Joystick 將前端 UI 框架與用於構建應用的 Node.js 後端結合在一起。

首先,我們要通過 NPM 安裝 Joystick。確保在安裝之前使用 Node.js 16+ 以確保兼容性(如果您需要學習如何安裝 Node.js 或在計算機上運行多個版本,請先閱讀本教程):

終端

npm i -g @joystick.js/cli

這將在您的計算機上全局安裝操縱桿。安裝好之後,接下來我們新建一個項目:

終端

joystick create app

幾秒鐘後,您將看到一條消息已註銷到 cd 進入你的新項目並運行 joystick start .在運行 joystick start 之前 ,我們需要安裝一個包,query-string

終端

cd app && npm i query-string

這個包將幫助我們動態解析和設置查詢參數。安裝完成後,繼續啟動服務器:

終端

joystick start

在此之後,您的應用應該可以運行了,我們可以開始了。

添加一些全局 CSS

為了更好地將我們的演示上下文化,我們將在整個教程中添加 CSS。首先,我們需要添加一些全局 CSS 來處理我們頁面的整體顯示:

/index.css

* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  background: #fff;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 15px auto;
  padding: 0 15px !important;
}

@media screen and (min-width: 768px) {
  .container {
    margin-top: 50px;
  }
}

默認情況下,當您打開此文件時,只有 body 的 CSS 標籤將存在。這裡的細節並不重要,但我們正在做的是為瀏覽器中的所有 HTML 元素添加一些“重置”樣式(刪除默認瀏覽器 CSS,它會添加額外的邊距和填充並更改元素在框中的流動方式型號)和一個 .container 類將允許我們輕鬆創建居中的 <div></div> 用於包裝內容。

這就是我們在這裡所需要的。稍後我們將在單個組件級別添加更多 CSS。接下來,我們需要為一個虛擬頁面連接一個路由,我們將使用它來測試我們的查詢參數。

添加路由以重定向到以測試參數

在 Joystick 應用中,所有路由都在服務器上定義在一個位置:/index.server.js .現在讓我們打開它並為一個我們可以重定向到的虛擬頁面添加一個路由,並驗證我們的查詢參數是否按預期工作:

/index.server.js

import node from "@joystick.js/node";
import api from "./api";

node.app({
  api,
  routes: {
    "/": (req, res) => {
      res.render("ui/pages/index/index.js", {
        layout: "ui/layouts/app/index.js",
      });
    },
    "/listings/:listingId": (req, res) => {
      res.render("ui/pages/listing/index.js");
    },
    "*": (req, res) => {
      res.render("ui/pages/error/index.js", {
        layout: "ui/layouts/app/index.js",
        props: {
          statusCode: 404,
        },
      });
    },
  },
});

當你運行 joystick start 從應用程序的根目錄開始,這是 Joystick 啟動的文件。這裡,node.app() 函數在幕後使用 Express.js 啟動一個新的 Node.js 應用程序。要表達,routes 在傳遞給 node.app() 的選項對像上定義的對象 已移交。

默認情況下,在這個對像上,我們看到 /* 正在定義的路線。上面,我們添加了一條新路線 /listings/:listingId .對於我們的應用,我們正在構建一個虛假的房地產搜索 UI,用戶可以在其中自定義一些搜索參數並查看列表。

在這裡,我們正在創建一個虛假的路由——它不會加載任何真實數據,只是一些靜態的虛擬數據——用戶將能夠重定向到的列表頁面。我們的想法是我們將在 / 上的 URL 上設置一些查詢參數 (index) 路由,然後允許用戶單擊指向此 /listings/:listingId 的鏈接 頁。當他們這樣做時,我們設置的查詢參數將“消失”。當它們返回時,我們希望這些查詢參數能夠恢復。

在此處的路由內部,我們調用 res 上的函數 對象,res.render() 這是 Joystick 在標準 Express res 中添加的特殊功能 目的。該函數旨在獲取我們應用程序中 Joystick 組件的路徑並將其呈現在頁面上。

在這裡,我們假設我們將有一個位於 /ui/pages/listing/index.js 的頁面 .我們現在就去接線吧。

連接虛假列表頁面

這個很快。這裡我們並不太關心頁面本身,只關心它的存在讓我們將用戶重定向到。

/ui/pages/listing/index.js

import ui from '@joystick.js/ui';

const Listing = ui.component({
  css: `
    .listing-image img {
      max-width: 100%;
      width: 100%;
      display: block;
      height: auto;
    }

    .listing-metadata {
      margin-top: 25px;
    }

    .listing-metadata .price {
      font-size: 28px;
      color: #333;
    }

    .listing-metadata .address {
      font-size: 18px;
      color: #888;
      margin-top: 7px;
    }

    .listing-metadata .rooms {
      font-size: 16px;
      color: #888;
      margin-top: 10px;
    }
  `,
  render: () => {
    return `
      <div class="container">
        <div class="listing-image">
          <img src="/house.jpg" alt="House" />
        </div>
        <div class="listing-metadata">
          <h2 class="price">$350,000</h2>
          <p class="address">1234 Fake St. Winter, MA 12345</p>
          <p class="rooms">3br, 2ba, 2,465 sqft</p>
        </div>
      </div>
    `;
  },
});

export default Listing;

這裡我們通過調用 .component() 創建一個 Joystick 組件 ui 上定義的函數 我們從 @joystick.js/ui 導入的對象 包裹。向該函數傳遞一個選項對象來定義我們的組件。

從底部開始,我們有一個 render() 函數告訴我們的組件我們想要為我們的組件呈現的 HTML。在這裡,因為我們不需要一個正常運行的頁面,我們只返回一個帶有一些硬編碼數據的純 HTML 字符串。值得注意的是,house.jpg 此處渲染的圖像可以從我們的 S3 存儲桶中下載。這應該放在 /public 項目根目錄下的文件夾。

除此之外,就像我們之前暗示的那樣,我們正在添加一些 CSS。為此,在操縱桿組件上,我們有 css 我們可以將 CSS 字符串傳遞給的選項。 Joystick 自動將此 CSS 範圍限定到該組件,以幫助我們避免將樣式洩漏給其他組件。

就是這裡。同樣,這只是一個虛擬組件,用於幫助我們測試我們將在下一節中設置的查詢參數邏輯。

使用過濾器和結果頁面連接虛假搜索 UI

儘管此組件中發生了很多事情,但我們要關注的部分是管理查詢參數的邏輯。為此,首先,讓我們為我們的組件構建骨架 UI,然後加入實際邏輯以使其正常工作。

雖然我們之前沒有討論過,但在這裡,我們將覆蓋 /ui/pages/index/index.js 的現有內容 文件:

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  css: `
    .search {
      padding: 20px;
    }

    header {
      display: flex;
      margin-bottom: 40px;
      padding-left: 20px;
    }

    header > * {
      margin-right: 20px;
    }

    .options label {
      margin-right: 10px;
    }

    .options label input {
      margin-right: 3px;
    }

    .listings ul {
      display: grid;
      grid-template-columns: 1fr;
      list-style: none;
    }

    .listings ul li {
      position: relative;
      padding: 20px;
      border: 1px solid transparent;
      cursor: pointer;
    }

    .listings ul li:hover {
      border: 1px solid #eee;
      box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.01);
    }

    .listings ul li a {
      position: absolute;
      inset: 0;
      z-index: 5;
    }

    .listing-image img {
      max-width: 100%;
      width: 100%;
      display: block;
      height: auto;
    }

    .listing-metadata {
      margin-top: 25px;
    }

    .listing-metadata .price {
      font-size: 24px;
      color: #333;
    }

    .listing-metadata .address {
      font-size: 16px;
      color: #888;
      margin-top: 7px;
    }

    .listing-metadata .rooms {
      font-size: 14px;
      color: #888;
      margin-top: 7px;
    }

    @media screen and (min-width: 768px) {
      .search {
        padding: 40px;
      }

      .listings ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }  
    }

    @media screen and (min-width: 1200px) {
      .listings ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }  
    }
  `,
  render: () => {
    return `
      <div class="search">
        <header>
          <input type="text" name="search" placeholder="Search listings..." />
          <select name="category">
            <option value="house">House</option>
            <option value="apartment">Apartment</option>
            <option value="condo">Condo</option>
            <option value="land">Land</option>
          </select>        
          <select name="status">
            <option value="forSale">For Sale</option>
            <option value="forRent">For Rent</option>
            <option value="sold">Sold</option>
          </select>
          <div class="options">
            <label><input type="checkbox" name="hasGarage" /> Garage</label>
            <label><input type="checkbox" name="hasCentralAir" /> Central Air</label>
            <label><input type="checkbox" name="hasPool" /> Pool</label>
          </div>
          <a href="#" class="clear">Clear</a>
        </header>
        <div class="listings">
          <ul>
            <li>
              <a href="/listings/123"></a>
              <div class="listing-image">
                <img src="/house.jpg" alt="House" />
              </div>
              <div class="listing-metadata">
                <h2 class="price">$350,000</h2>
                <p class="address">1234 Fake St. Winter, MA 12345</p>
                <p class="rooms">3br, 2ba, 2,465 sqft</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    `;
  },
});

export default Index;

上面,我們在頁面上為我們的 UI 獲取了核心 HTML 和 CSS。同樣,我們的目標是擁有一個偽搜索 UI,用戶可以在其中設置一些搜索參數並在頁面上查看結果列表。在這裡,我們正在構建核心 UI 並對其進行樣式設置。添加後,如果我們訪問 http://localhost:2600/ (忽略 2605 在下面的屏幕截圖中(這只是為了在編寫時進行測試)在我們的瀏覽器中,我們應該看到如下內容:

接下來,讓我們為搜索 UI 連接一個“默認”狀態(我們將 UI 標題或頂部部分中的所有內容稱為“搜索 UI”)。

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  state: {
    search: '',
    category: 'house',
    status: 'forSale',
    hasGarage: false,
    hasCentralAir: false,
    hasPool: false,
  },
  css: `...`,
  render: ({ state }) => {
    return `
      <div class="search">
        <header>
          <input type="text" name="search" value="${state.search}" placeholder="Search listings..." />
          <select name="category" value="${state.category}">
            <option value="house" ${state.category === 'house' ? 'selected' : ''}>House</option>
            <option value="apartment" ${state.category === 'apartment' ? 'selected' : ''}>Apartment</option>
            <option value="condo" ${state.category === 'condo' ? 'selected' : ''}>Condo</option>
            <option value="land" ${state.category === 'land' ? 'selected' : ''}>Land</option>
          </select>        
          <select name="status" value="${state.status}">
            <option value="forSale" ${state.status === 'forSale' ? 'selected' : ''}>For Sale</option>
            <option value="forRent" ${state.status === 'forRent' ? 'selected' : ''}>For Rent</option>
            <option value="sold" ${state.status === 'sold' ? 'selected' : ''}>Sold</option>
          </select>
          <div class="options">
            <label><input type="checkbox" name="hasGarage" ${state?.hasGarage ? 'checked' : ''} /> Garage</label>
            <label><input type="checkbox" name="hasCentralAir" ${state?.hasCentralAir ? 'checked' : ''} /> Central Air</label>
            <label><input type="checkbox" name="hasPool" ${state?.hasPool ? 'checked' : ''} /> Pool</label>
          </div>
          <a href="#" class="clear">Clear</a>
        </header>
        <div class="listings">
          <ul>
            <li>
              <a href="/listings/123"></a>
              <div class="listing-image">
                <img src="/house.jpg" alt="House" />
              </div>
              <div class="listing-metadata">
                <h2 class="price">$350,000</h2>
                <p class="address">1234 Fake St. Winter, MA 12345</p>
                <p class="rooms">3br, 2ba, 2,465 sqft</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    `;
  },
});

export default Index;

在 Joystick 組件上,我們可以傳遞一個 state 默認情況下(即,當組件首次加載時)分配給我們要分配給組件內部狀態的屬性對象的選項。在這裡,我們正在創建一些希望用於搜索 UI 的默認值。

這裡的重要部分,在 render() 函數,是我們在 render() 中添加了一個參數 我們預期的函數是一個對象,我們可以解構它以“提取”特定屬性並將它們分配給當前範圍/上下文中的同名變量。我們在這裡期望的對像是 component 實例(意思是我們當前正在創作的組件,因為它存在於內存中)。

在這種情況下,我們希望能夠訪問當前的 state 價值。在這種情況下,“狀態”是指我們 UI 的視覺狀態。 state 上的值 對象旨在成為動態增強這種視覺狀態的一種手段。

在這裡,我們採用 state 對象來引用值來填充我們的搜索 UI。我們的 UI 中有三種類型的輸入:

  1. input 這是一個純文本輸入,用於輸入一串搜索文本。
  2. select 用於我們列出的“類別”和“狀態”輸入。
  3. checkbox 用於我們的便利設施複選框。

在我們的 HTML 中,我們使用 JavaScript 字符串插值(用於在字符串中嵌入/評估 JavaScript 的語言級功能)引用這些值。我們可以這樣做,因為我們從組件的 render() 返回的值 函數是一個字符串。

根據我們渲染的輸入類型,我們使用相應的狀態值略有不同。對於我們的純文本搜索輸入,我們可以設置一個 value 屬性等於 state.search 的值 .

對於我們的選擇 <select> 我們將輸入都設置為 value<select> 上的屬性 標記以及條件 selected <select> 中每個選項的屬性 列表(重要的是如果我們不這樣做,輸入的當前值不會顯示為選中沒有這個屬性)。

最後,對於我們的複選框輸入,我們有條件地添加 checked 屬性值基於對應的state 每個輸入的值。

這為我們提供了 UI 的基礎知識。現在,我們已準備好將捕獲的更改連接到我們的搜索 UI,並將它們作為查詢參數存儲在我們的 URL 中。

將搜索過濾器捕獲為查詢參數

現在我們已經設置了基本 UI,我們可以開始管理我們的查詢參數。為此,我們將向 UI 添加一些 JavaScript 事件偵聽器,以便我們可以獲取用戶設置的最新值:

/ui/pages/index/index.js

import ui from '@joystick.js/ui';
import queryString from 'query-string';

const Index = ui.component({
  state: { ... },
  methods: {
    handleUpdateQueryParams: (param = '', value = '') => {
      const existingQueryParams = queryString.parse(location.search);
      const updatedQueryParams = queryString.stringify({
        ...existingQueryParams,
        [param]: value,
      });

      window.history.pushState('', '', `?${updatedQueryParams}`);
    },
    handleClearQueryParams: (component = {}) => {
      window.history.pushState('', '', `${location.origin}${location.pathname}`);
      component.methods.handleSetStateFromQueryParams();
    },
  },
  css: `...`,
  events: {
    'keyup [name="search"]': (event, component = {}) => {
      component.methods.handleUpdateQueryParams('search', event.target.value);
    },
    'change [name="category"]': (event, component = {}) => {
      component.methods.handleUpdateQueryParams('category', event.target.value);
    },
    'change [name="status"]': (event, component = {}) => {
      component.methods.handleUpdateQueryParams('status', event.target.value);
    },
    'change [type="checkbox"]': (event, component = {}) => {
      component.methods.handleUpdateQueryParams(event.target.name, event.target.checked);
    },
    'click .clear': (event, component = {}) => {
      event.preventDefault();
      component.methods.handleClearQueryParams();
    },
  },
  render: ({ state }) => {
    return `
      <div class="search">
        ...
      </div>
    `;
  },
});

export default Index;

上面,我們為組件的選項添加了兩個新屬性:eventsmethods .專注於events ,在這裡,Joystick 幫助我們監聽由我們的組件渲染的元素上的 JavaScript DOM 事件。每個事件都被定義為傳遞給 events 的對象的一個屬性 其中屬性名稱是一個字符串,描述要偵聽的 DOM 事件的類型以及我們組件內部要偵聽事件的元素 on .

對於該屬性,我們分配一個函數,當在指定元素上檢測到該事件時應該調用該函數。在這裡,我們為每個與搜索相關的輸入添加了偵聽器(除了複選框輸入,我們通常在類型為 checkbox 的輸入上偵聽 )。

請注意,這裡的奇怪鴨子是 search 文字輸入。在這裡,我們要監聽 keyup 輸入上的事件,因為我們想要捕獲對輸入的每個更改(如果我們監聽 change 像我們做其他事件一樣,它只會在用戶“模糊”或點擊輸入後觸發)。

在所有事件監聽器中(除了我們稍後會介紹的最後一個),我們調用 component.methods.handleUpdateQueryParams() . Joystick 向事件監聽器的回調函數傳遞兩個值:eventcomponent . event 是觸發的原始 JavaScript DOM 事件和 component 作為當前組件實例(類似於我們在 render() 中看到的 )——= {} component 之後的部分 這是我們定義一個默認值——一個核心的 JavaScript 特性——在 component 的事件中回退到 沒有定義(這永遠不會是真的,因為它是自動的 - 考慮將其添加為習慣的力量)。

來自 component 例如,我們想要訪問 methods 上定義的方法 對象(我們可以在我們的組件實例上存儲各種方法)。在這裡,我們調用了上面定義的方法,handleUpdateQueryParams() .

在頂部,我們添加了 queryString 的導入 我們之前安裝的包,它將幫助我們解析 URL 中現有的查詢參數並為 addition 準備我們的值 到網址。

handleUpdateQueryParams() 內部 ,我們需要預測我們正在添加的 URL 中現有的查詢參數,因此,我們首先獲取任何現有的查詢參數並將它們解析為具有 queryString.parse() 的對象 .這裡,location.search 是包含當前查詢字符串的全局瀏覽器值,例如 ?someParam=value .當我們將該值傳遞給 queryString.parse() 我們得到一個像 { someParam: 'value' } 這樣的 JavaScript 對象 .

有了這個,我們創建了另一個變量 updatedQueryParams 設置為調用 queryString.stringify() 並傳遞了一個我們想要轉換回查詢字符串的對象,例如 ?someParam=value .

在該對像上,使用 JavaScript ... 展開運算符,我們首先“解包”或展開任何現有的查詢參數,然後立即使用 [param]: value param 是我們要更新的參數的名稱(作為第一個參數傳遞給 handleUpdateQueryParams() ) 和 value 是我們要為該參數設置的值——通過傳遞給 handleUpdateQueryParams() 的第二個參數設置 . [param] 這裡的語法是使用 JavaScript 括號表示法來表示“動態地將屬性名稱設置為 param 的值 論據。”

如果我們在我們的事件處理程序中查看它是如何調用的,我們會傳遞 param 作為字符串或在我們的複選框輸入的情況下,作為 event.target.name 值或 name 觸發事件的複選框的屬性。

使用 updatedQueryParams 編譯,接下來,為了更新我們的 URL,我們調用全局 window.history.pushState() 傳遞我們要應用於 URL 的更新。這裡,history.pushState() 是一個更新我們瀏覽器的歷史的函數 但不會觸發瀏覽器刷新(就像我們手動設置 location.search 時所期望的那樣 直接取值)。

誠然,history.pushState() 的 API 有點令人困惑(如 MDN 文章中關於此處功能的文章中所述)。對於前兩個值,我們只傳遞空字符串(如果您對它們的用途感到好奇,請參閱 MDN 上的上一個鏈接),對於第三個參數,我們傳遞我們想要“推送”到瀏覽器歷史記錄的 URL。

在這種情況下,我們不想修改 URL 本身,只修改查詢參數,所以我們傳遞一個包含 ? 的字符串 它表示 URL 中查詢參數的開頭以及 queryString.stringify() 返回的值 在 updatedQueryParams .

而已。現在,如果我們開始對 UI 進行更改,我們應該會看到我們的 URL 開始隨著搜索 UI 的輸入值動態更新。

在我們繼續之前,非常快,請注意 click .clear 事件監聽器和隨後對 methods.handleClearQueryParams() 的調用 ,這裡我們按照代碼的建議進行操作:當用戶單擊搜索 UI 末尾的“清除”鏈接時,清除我們在 URL 上設置的所有查詢參數。

為此,我們最終調用 history.pushState() ,這次傳遞的是當前location.origin的組合 (例如,http://localhost:2600 ) 與當前的 location.pathname (例如,//listings/123 )。這有效地清除了 URL 中的所有查詢參數,並將其剝離為當前頁面的基本 URL。

在此之後,我們將調用另一個尚未定義的方法:methods.handleSetStateFromQueryParams() .我們將在下一部分(也是最後一部分)中看到它是如何形成的。

頁面加載時重新加載搜索過濾器

這部分相當簡單。現在我們的 URL 中有查詢參數,我們希望在頁面加載時考慮這些參數。請記住,我們希望能夠離開此頁面,返回並讓我們的搜索 UI 從 URL“重新加載”用戶的搜索值。

/ui/pages/index/index.js

import ui from '@joystick.js/ui';
import queryString from 'query-string';

const Index = ui.component({
  state: { ... },
  lifecycle: {
    onMount: (component = {}) => {
      component.methods.handleSetStateFromQueryParams();
    },
  },
  methods: {
    handleSetStateFromQueryParams: (component = {}) => {
      const queryParams = queryString.parse(location.search);
      component.setState({
        search: queryParams?.search || '',
        category: queryParams?.category || 'house',
        status: queryParams?.status || 'forSale',
        hasGarage: queryParams?.hasGarage && queryParams?.hasGarage === 'true' || false,
        hasCentralAir: queryParams?.hasCentralAir && queryParams?.hasCentralAir === 'true' || false,
        hasPool: queryParams?.hasPool && queryParams?.hasPool === 'true' || false,
      });
    },
    handleUpdateQueryParams: (param = '', value = '') => { ... },
    handleClearQueryParams: (component = {}) => {
      window.history.pushState('', '', `${location.origin}${location.pathname}`);
      component.methods.handleSetStateFromQueryParams();
    },
  },
  css: `...`,
  events: { ... },
  render: ({ state }) => {
    return `
      <div class="search">
        ...
      </div>
    `;
  },
});

export default Index;

最後部分。上面,我們在組件選項 lifecycle 中添加了一個附加屬性 在傳遞給它的對像上,我們定義了一個函數 onMount 接收 component 實例作為第一個參數。

在這裡,我們說“當這個組件在瀏覽器中掛載(加載)時,調用 methods.handleSetStateFromQueryParams() 功能。這個想法是你所期望的:當頁面加載時,將當前的一組查詢參數從 URL 加載回我們組件的狀態。

專注於handleSetStateFromQueryParams() ,這裡的工作很簡單。首先,我們希望將查詢參數作為對象 queryParams 通過調用 queryString.parse(location.search) .這類似於我們之前看到的,取 ?someParam=value 查詢參數的形式並將其轉換為 JavaScript 對象,如 { someParam: 'value' } .

使用該對象 queryParams ,我們調用 component.setState() 動態更新我們組件的狀態。在這裡,我們設置了我們在組件的默認 state 中指定的每個值 早些時候。對於每個值,我們嘗試從 queryParams 訪問該參數 目的。如果存在,我們使用它,如果不存在,我們使用 JavaScript 或 || 操作員說“改用這個值”。在這裡,“instead”只是回退到我們之前在默認狀態下設置的相同值。

而已!現在,當我們設置一些搜索值並刷新頁面時,如果我們刷新頁面,我們的查詢參數將保留並自動設置回我們的 UI。如果我們單擊列表中的虛假列表以轉到其詳細信息頁面,然後在瀏覽器中單擊“返回”,我們的查詢參數仍將存在於 URL 中並被加載回 UI。

總結

在本教程中,我們學習瞭如何在瀏覽器中動態設置查詢參數。我們學習瞭如何創建一個簡單的動態搜索 UI,將用戶的搜索參數存儲在 URL 中,以及在重新加載頁面時,如何將這些參數從 URL 加載回我們的 UI。為此,我們學習瞭如何結合 query-string 使用操縱桿組件的各種功能 包來幫助我們對 URL 中的查詢參數進行編碼和解碼。


Tutorial JavaScript 教程
  1. 當用戶更改選項卡時更改文檔標題

  2. 使用 JavaScript 重構 JavaScript

  3. 如何學習 JavaScript 以成為更好的開發人員。

  4. 流星:從陰影中回來

  5. 類型 |治療挑戰 2

  6. Frame Buster Buster ...需要破壞者代碼

  7. CRUD APP....哪個更容易製作? REACT 或 DJANGO

  1. JavaScript 設置圖 |代碼

  2. 你好世界!但有 30 種不同的語言!!!

  3. 解決方案:二叉樹中的平均水平

  4. 滾動子 div 滾動窗口,我該如何停止呢?

  5. JavaScript 中的本地存儲 API 🍂

  6. 收音機並選擇帶有警報的選項

  7. 如果選擇了選項(做某事),如何在我的情況下使用

  1. JavaScript 設計模式:橋

  2. 如何使用 Integromat 連接 ActionForms.io + Airtable

  3. 學習如何在 JavaScript 中編寫 Flappy Bird 和 Doodle Jump

  4. Shopify App From Scratch #6 - 樣機第 2 部分