如何在将参数添加到 url 之前检查参数

Question

我需要将参数值存储在 localStorage 中：

<script>
let searchParams = new URLSearchParams(window.location.search);

localStorage.setItem('from', searchParams.get('from'));
localStorage.setItem('page', searchParams.get('page'));
localStorage.setItem('distance',searchParams.get('distance'));

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  window.location = '<%= url_for(way_sleeps_path(params[:way_id])) %>?from=' + localStorage.getItem('from') + '&distance=' + localStorage.getItem('distance') + '&page=' + localStorage.getItem('page');
}
</script>

当一个或多个参数为空或不存在时，我的函数 addParameter 返回例如： `?from=null&distance=null&page=2 我得到一个错误。

如何检查 localStorage 是否返回非空值或 null 值并将它们添加到 url 中？

**我已按照 York 的建议更新了我的脚本 **

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  window.location = '<%= url_for(way_sleeps_path(params[:way_id])) %>?from=' + (localStorage.getItem('from') || '')  + '&distance=' + (localStorage.getItem('distance')  || '') + '&page=' + (localStorage.getItem('page') || '');
}

但是

在 localStorage 中，我得到 3 个值：页面、距离和距离

但是我的函数返回了一个错误的 url：

?from=112&distance=1 没有页面参数

如果我的 url 没有参数，我的函数返回：

?from=null&distance=null

Answer 1

可能类似于（不确定是否需要 encodeURIComponent，未测试）：

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  
  const base_url = '<%= url_for(way_sleeps_path(params[:way_id])) %>';
  const param_string = ['from', 'distance', 'page']
    .map((key) => localStorage.getItem(key) ?
        [key, encodeURIComponent(localStorage.getItem(key))] :
        null
     )
    .filter((item) => item)
    .map((item) => item.join('='))
    .join('&');
  
  window.location = base_url + (param_string ? '?' + param_string : '');
}

使用默认值：

const params_defaults = {
  from: 2,
  page: 1,
  distance: null,
};

// uncomment this and remove test_ls and the other ls_result_for_key_or_default
// const ls_result_for_key_or_default = (key, default_value) =>
//  localStorage.getItem(key) ? localStorage.getItem(key) : default_value;

const test_ls = {
  from: null,
  page: 3,
};

const ls_result_for_key_or_default = (key, default_value) =>
  test_ls[key] ? test_ls[key] : default_value;

const params_object_from_ls_with_defaults = (defaults) =>
  Object.fromEntries(
    Object.entries(defaults).map(
      ([key, default_value]) => [key, ls_result_for_key_or_default(key, default_value)]
    ).filter((entry) => entry[1])
  );

const params_string_for_object = (params) =>
  Object.entries(params)
    .map(([key, value]) => key + '=' + encodeURIComponent(value))
    .join('&');

const append_params_string_to_url = (url) => (params_string) => 
  url + (params_string ? '?' + params_string : '')

// assumes there aren't already params in the URL
const add_stored_params_to_url = (url) =>
  append_params_string_to_url(url)(
    params_string_for_object(
      params_object_from_ls_with_defaults(params_defaults)
    )
  );

function addParameter() {
  document.getElementById('nav-bottom-back').removeAttribute("href");
  const base_url = '<%= url_for(way_sleeps_path(params[:way_id])) %>';
  window.location = add_stored_params_to_url(base_url);
}

console.log(add_stored_params_to_url('http://bob.froed.vom/thingy'));

Answer 2

 localStorage.getItem('from') || ''