URLSearchParams 表单数据序列化与反序列化、管理路由状态、分享和书签功能、追踪和分析等7种应用场景

URLSearchParams是一个非常实用的Web API，主要用于操作URL中的查询字符串部分。以下是一些经典的应用场景：

1. 表单数据序列化与反序列化：

提一下，当请求类型设置为 application/x-www-form-urlencoded 发送POST请求时，HTTP 协议要求在发送数据时，非二进制数据（如文本字段值）必须以一种特定的、可读的字符串格式进行编码。这种编码方式遵循URL编码规则，确保数据在传输过程中能够安全地穿越网络，并且服务器能够正确解析，因此客户端（通常是浏览器或应用程序）需要将表单数据序列化。

对于简单的键值对，可以手动构建字符串或使用URLSearchParams对象将表单数据序列化为查询字符串形式，替代传统的表单提交方式，尤其是在使用Ajax请求时。同样，在接收数据时，也可以用它来解析并填充表单字段。

let form = document.getElementById('searchForm');
let formData = new FormData(form);
let searchParams = new URLSearchParams(formData);

console.log(searchParams.toString()); // 输出: query=JavaScript&includeArchived=true

请求体数据包含嵌套的对象或数组时,手动遍历并将其展平为一系列键值对的方式来处理复杂的数据结构:

function flattenObject(obj, prefix = '') {
    const params = new URLSearchParams();
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            const newKey = prefix ? `${prefix}[${key}]` : key;
            if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
                Object.assign(params, flattenObject(obj[key], newKey));
            } else if (Array.isArray(obj[key])) {
                obj[key].forEach((item, index) => {
                    if (typeof item === 'object') {
                        Object.assign(params, flattenObject(item, `${newKey}[${index}]`));
                    } else {
                        params.append(`${newKey}[${index}]`, item);
                    }
                });
            } else {
                params.append(newKey, obj[key]);
            }
        }
    }
    return params;
}

2. 管理路由状态：

在单页应用（SPA）中，URLSearchParams可以用来管理路由状态，通过解析和设置查询参数来传递页面间的状态信息，而无需重新加载整个页面。基于React和React Router使用URLSearchParams管理路由状态的简单案例：

<Route path="/products" component={ProductsList} />

ProductsList.js

import React, { useEffect, useState } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function ProductsList() {
  const location = useLocation();
  const history = useHistory();
  const [filters, setFilters] = useState({ price: '', brand: '', category: '' });

  useEffect(() => {
    // 解析URL中的查询参数作为筛选条件
    const searchParams = new URLSearchParams(location.search);
    setFilters({
      price: searchParams.get('price') || '',
      brand: searchParams.get('brand') || '',
      category: searchParams.get('category') || ''
    });
  }, [location.search]);

  const applyFilter = (filterType, value) => {
    // 更新筛选条件，并反映到URL上
    const newSearchParams = new URLSearchParams(location.search);
    newSearchParams.set(filterType, value);
    history.push(`/products?${newSearchParams.toString()}`);
  };

  return (
    <div>
      {/* 筛选器UI部分 */}
      <button onClick={() => applyFilter('price', 'low')}>Low Price</button>
      {/* 商品列表部分 */}
    </div>
  );
}

export default ProductsList;

当用户点击不同的筛选条件时，applyFilter 函数会被调用，它会更新URL的查询参数，并利用history.push方法导航到新的URL，同时更新应用状态以反映新的筛选条件。这样，不仅用户界面会即时更新，而且如果用户刷新页面或分享链接，应用也能正确恢复到之前筛选的状态。

3. 分享和书签功能：

应用中可能有定制化视图或过滤条件，通过URLSearchParams可以将这些状态编码到URL中，便于用户分享或保存书签，下次访问时恢复到相同状态。

let currentUrl = window.location.href;
let shareParams = new URLSearchParams(currentUrl.split('?')[1]);
shareParams.set('view', 'custom');
shareParams.set('filter', 'highlights');

let shareLink = `${window.location.origin}/myview?${shareParams.toString()}`;
console.log(shareLink);

4. 追踪和分析：

在进行用户行为分析或广告追踪时，可以在URL中添加跟踪参数，然后使用URLSearchParams来提取这些参数，帮助分析用户来源或特定活动的表现。

function generateTrackingURL(campaign, adSet, creative, audience) {
    let url = new URL("https://www.yourwebsite.com/landing-page");
    let params = new URLSearchParams();

    params.set('utm_source', campaign); // 广告系列名称，如 "Facebook"
    params.set('utm_medium', 'social'); // 介质类型，固定为 "social"
    params.set('utm_campaign', adSet); // 广告组或广告系列ID，如 "SpringSale2023"
    params.set('utm_content', creative); // 特定创意的标识，如 "ad-creative-123"
    params.set('utm_term', audience); // 目标受众关键词，如 "fashion-lovers"

    url.search = params.toString();
    return url.href;
}

// 生成一个示例链接
let trackingURL = generateTrackingURL("Facebook", "SpringSale2024", "ad-creative-123", "fashion-lovers");
console.log(trackingURL);
// 输出: https://www.yourwebsite.com/landing-page?utm_source=Facebook&utm_medium=social&utm_campaign=SpringSale2023&utm_content=ad-creative-123&utm_term=fashion-

5. 动态生成查询字符串：

当你需要根据用户输入或程序逻辑动态生成URL查询参数时，URLSearchParams可以让这个过程变得简单且易读。例如，在一个搜索功能中，根据用户的选择添加或修改查询参数。

let params = new URLSearchParams();
params.set('category', 'electronics');
params.set('price_range', '100-500');
params.set('sort_by', 'rating');

let url = `/products?${params.toString()}`;
console.log(url); // 输出: /products?category=electronics&price_range=100-500&sort_by=rating

6. 解析查询字符串：

当页面加载时，可能需要解析URL中的查询参数来决定页面内容或执行某些操作。URLSearchParams提供了一种简便的方法来获取查询字符串中的各个参数及其值。

let url = new URL("https://example.com/products?category=electronics&price_range=100-500&sort_by=rating");
let params = new URLSearchParams(url.search);

let category = params.get('category');
let priceRange = params.get('price_range');
let sortBy = params.get('sort_by');

console.log(`Category: ${category}, Price Range: ${priceRange}, Sort By: ${sortBy}`);

7. API请求参数构造：

在前端与后端交互，特别是发送GET请求时，URLSearchParams可以用来构造请求的查询参数，确保参数正确编码且易于管理和维护。

let apiUrl = 'https://api.example.com/users';
let queryParams = new URLSearchParams();
queryParams.set('id', '12345');
queryParams.set('fields', 'name,email');

fetch(`${apiUrl}?${queryParams.toString()}`)
  .then(response => response.json())
  .then(data => console.log(data));