Js url传递对象和数组类型的参数，无法解析

Question

这段代码是我使用的解析对象拼接成url字符串的方法

 encodeParamsStr: function(obj) {
    var params = [];
    Object.keys(obj).forEach(function(key) {
      var value = obj[key];
      // 如果值为undefined我们将其置空
      if (typeof value === "undefined") {
        value = "";
      }
      // 对于需要编码的文本（比如说中文）我们要进行编码
      params.push([key, encodeURIComponent(value)].join("="));
    });
    return params.join("&");
  },

下面这个是我的调用

   let baseUrl = 'static/html/charting_library/static/tv-chart.e816a7a6edc9de3ed709.html';
      let obj = {
        localserver:1,
        widgetbar:{"datawindow":false,"details":false,"watchlist":false,"watchlist_settings":{"default_symbols":[]}},
        drawingsAccess:{"type":"black","tools":[{"name":"Regression Trend"}]},
        timeFrames:[
          {"text":"5Y","resolution":"W","description":"5年","title":"5年"},
          {"text":"1Y","resolution":"D","description":"1年","title":"1年"},
          {"text":"6M","resolution":"120","description":"6月","title":"6月"},
          {"text":"3M","resolution":"60","description":"3月","title":"3月"},
          {"text":"1M","resolution":"30","description":"1月","title":"1月"},
          {"text":"5D","resolution":"5","description":"5日","title":"5日"},
          {"text":"1D","resolution":"1","description":"1日","title":"1日"}
        ],
        locale:'zh',
        customCSS:'night.css',
        debug:false,
        timezone:'Asia/Shanghai',
      }
      this.chartUrl = `${baseUrl}#${this.$utils.encodeParamsStr(obj)}`;
      $("#chart_iframe").attr('src', this.chartUrl);

下图这个是访问的url，其中对象并没有被解析出来，还是Object，我需要的正确效果应该是像图二这样被编译

Answer 1

const encodeParams = window.encodeURIComponent(JSON.stringify(obj));
const params = JSON.parse(window.decodeURIComponent(encodeParams));

补充回答

let baseUrl =
  'static/html/charting_library/static/tv-chart.e816a7a6edc9de3ed709.html';

let obj = {
  localserver: 1,
  widgetbar: {
    datawindow: false,
    details: false,
    watchlist: false,
    watchlist_settings: { default_symbols: [] },
  },
  drawingsAccess: { type: 'black', tools: [{ name: 'Regression Trend' }] },
  timeFrames: [
    { text: '5Y', resolution: 'W', description: '5年', title: '5年' },
    { text: '1Y', resolution: 'D', description: '1年', title: '1年' },
    { text: '6M', resolution: '120', description: '6月', title: '6月' },
    { text: '3M', resolution: '60', description: '3月', title: '3月' },
    { text: '1M', resolution: '30', description: '1月', title: '1月' },
    { text: '5D', resolution: '5', description: '5日', title: '5日' },
    { text: '1D', resolution: '1', description: '1日', title: '1日' },
  ],
  locale: 'zh',
  customCSS: 'night.css',
  debug: false,
  timezone: 'Asia/Shanghai',
};

// 序列化对象为 JSON 字符串并使用 base64 编码
this.chartUrl = `${baseUrl}#${btoa(encodeURIComponent(JSON.stringify(obj)))}`;
$('#chart_iframe').attr('src', this.chartUrl);

解析参数

const params = JSON.parse(
  decodeURIComponent(
    atob(
      document
        .querySelector('#chart_iframe')
        .contentWindow.location.hash.substr(1)
    )
  )
);

console.log(params);

Answer 2

你这个函数只解析了obj属性是原始值的情况吧？如果属性值是对象和数组就不行了。里面只判断了undefined的情况，没有对对象和数组的处理