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

Question

所以我目前有以下问题。

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

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

我知道我(很可能(需要以下(伪(逻辑：

savePreset: function() { define url variable when user clicks 'Save' button, Fetch current URL and specified input name save URL }

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

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

如果有人对此有任何经验或知道以前的答案，或者可以帮助我，我将不胜感激。

PS：请注意，我对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;

我尝试将其分配为可观察数组 - 但随后代码不起作用。

Answer 1

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

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

我认为这段代码会为你解决问题您可以在此处阅读有关位置的更多信息，并在此处阅读本地存储

Answer 2

我相信

你想使用HTML5 localStorage来实现这一点。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

您将能够将预设存储到 localStorage 中，然后为用户加载所有预设。