javascript - 如何保存当前 URL 并通过单击按钮加载它

Question

所以我目前遇到以下问题。

我有一个动态图表，我可以向其中添加各种变量，并且该图表显然会根据添加的变量而变化。添加或删除变量时，URL 将根据这些变量自动更改，因此我可以获取确切的 URL 并重新加载它，这将再次显示相同的选定变量。 URL 不遵循设定的格式，并且会按照选择的顺序将变量逐字添加到其末尾。

我的问题是，我希望用户能够在文本框中输入名称，然后在“提交”时，当前 URL 将与用户名称一起保存已指定(注意:我不会将 URL 保存到服务器)。然后，该名称将显示在一个多列表中，用户可以在其中选择一个选项，选择后，应用程序将自动加载与该名称相关的特定 URL。

我知道我(最有可能)需要以下(伪)逻辑:

savePreset: function() { 定义用户点击“保存”按钮时的 url 变量，获取当前 URL 和指定输入名称保存 URL }

列出预设，我将在 View 中使用数据绑定(bind)来显示，然后加载预设，我不太确定如何解决这个问题。

我正在使用 Knockout.Js，老实说我很困惑。我已经尝试了几种方法来做到这一点，但我无法接近我所需要的(而且我很确定这是一个简单的解决方案)。

如果有人有这方面的经验或知道以前的答案，或者可以帮助我，我将非常感激。

P.S:请注意，我对 JS 总体来说不是那么强，而且我对 Knockout 还很陌生，所以我仍在学习中。

编辑

我仍然无法在列表中显示它并为关联的 URL 指定输入值。下面是我用于保存 URL 的新函数。

        ` setPreset: function() {
      var setCurrentLocation;

        if (!localStorage.setCurrentLocation) {
            setCurrentLocation = [];
        } else {
            setCurrentLocation = JSON.parse(localStorage.setCurrentLocation);
        }
    
        var ourLocation = [document.URL];

        setCurrentLocation.push(ourLocation);

      try {
          localStorage.setCurrentLocation = JSON.stringify(setCurrentLocation);
          console.log("Preset was Saved: " + ourLocation);
          return true;          
      }
      catch (e) {
          if (e == QUOTA_EXCEEDED_ERR) {
              alert("Preset Quota exceeded!");
          }
      }
  },`

我还尝试像这样显示“列表”: `

` 显然，因为没有任何内容被保存，因此没有任何内容被显示。我的观点，对于这个特定的位，被定义为 ` setPreset: function () { self.setPreset.apply(self); },` var self = this;

我尝试将其分配为 observableArray - 但代码不起作用。

Answer 1

您只需将网址保存在本地存储中即可 您需要做的就是

var url=location.href;
localStorage.setItem("url",url);
function loadOldUrl(){
location.href=localStorage.getItem("url");
}
//when button clicked
document.querySelector("#myButton").addEventListener("click",loadUrl);

我认为这段代码可以为你解决问题 您可以阅读有关位置的更多信息 here和本地存储here