So I currently have the following problem.

I have a dynamic graph that I can add various variables to and the graph will obviously change depending on what variables are added. When a variable is added or remove, the URL will automatically change according to these variables, so I can take that exact URL and reload it, which will display the same selected variables again. The URL doesn't follow a set format and will literally add the variables onto the end of it in the order it is selected.

My problem is that I want the user to be able to enter a name into a text-box, and then on 'Submit', the current URL will be saved along with the name the user has specified (NOTE: I am not saving the URL(s) to a server). This name would then be displayed in a multi-list where the user can select one option and upon selection, the application would automatically load that specific URL that is related to that name.

I know I would need (most likely)the following (pseudo) logic:

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

Listing the preset I would use data-binds in the view to display and then with loading the preset, I'm not quite sure how to tackle that.

I'm using Knockout.Js and I'm honestly stumped. I've tried a few ways to do this but I can't get anywhere near to what I need (and I'm pretty sure it's a simple solution).

If anyone has any experience with this or knows of a previous answer, or can help me out, I would be truly grateful.

P.S: Please note I'm not that strong with JS in general and I'm quite new to Knockout so I am still learning.

EDIT

I'm still having trouble displaying it in a list and specifying an input value for the associated URL. Below is my new function for saving the 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!");
          }
      }
  },`

I'm also trying to display the 'list' like this: `

I have tried assigning it as an observableArray - but then the code doesn't work.

So I currently have the following problem.

I have a dynamic graph that I can add various variables to and the graph will obviously change depending on what variables are added. When a variable is added or remove, the URL will automatically change according to these variables, so I can take that exact URL and reload it, which will display the same selected variables again. The URL doesn't follow a set format and will literally add the variables onto the end of it in the order it is selected.

My problem is that I want the user to be able to enter a name into a text-box, and then on 'Submit', the current URL will be saved along with the name the user has specified (NOTE: I am not saving the URL(s) to a server). This name would then be displayed in a multi-list where the user can select one option and upon selection, the application would automatically load that specific URL that is related to that name.

I know I would need (most likely)the following (pseudo) logic:

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

Listing the preset I would use data-binds in the view to display and then with loading the preset, I'm not quite sure how to tackle that.

I'm using Knockout.Js and I'm honestly stumped. I've tried a few ways to do this but I can't get anywhere near to what I need (and I'm pretty sure it's a simple solution).

If anyone has any experience with this or knows of a previous answer, or can help me out, I would be truly grateful.

P.S: Please note I'm not that strong with JS in general and I'm quite new to Knockout so I am still learning.

EDIT

I'm still having trouble displaying it in a list and specifying an input value for the associated URL. Below is my new function for saving the 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!");
          }
      }
  },`

I'm also trying to display the 'list' like this: `

I have tried assigning it as an observableArray - but then the code doesn't work.

• javascript
• jquery
• html
• knockout.js

• This is easy, just call the window.doYourWorkForYou("Name") function and it will just work – QBM5 Commented Feb 5, 2016 at 21:25
• Have you gone through the Knockout tutorial? learn.knockoutjs. – Roy J Commented Feb 6, 2016 at 0:22

2 Answers 2

you can simply keep your url in local storage all you need to do is

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

i think this code will do the trick for you you can read about location more here and the local storage here

I believe you want to use HTML5 localStorage to acplish this.

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

You'll be able to storage your presets into localStorage, then load them all for the user.