javascript - How to Save the Current URL and Load it via button click -

so have following problem.

i have dynamic graph can add various variables , graph change depending on variables added. when variable added or remove, url automatically change according these variables, can take exact url , reload it, display same selected variables again. url doesn't follow set format , literally add variables onto end of in order selected.

my problem is want user able enter name text-box, , on 'submit', current url saved along name user has specified (note: not saving url(s) server). name displayed in multi-list user can select 1 option , upon selection, application automatically load specific url related name.

i know need (most likely)the following (pseudo) logic:

savepreset: function() { define url variable when user clicks 'save' button, fetch current url , specified input name save url }

listing preset use data-binds in view display , loading preset, i'm not quite sure how tackle that.

i'm using knockout.js , i'm stumped. i've tried few ways can't anywhere near need (and i'm pretty sure it's simple solution).

if has experience or knows of previous answer, or can me out, grateful.

p.s: please note i'm not strong js in general , i'm quite new knockout still learning.

edit

i'm still having trouble displaying in list , specifying input value associated url. below new function saving 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 saved: " + ourlocation);           return true;                 }       catch (e) {           if (e == quota_exceeded_err) {               alert("preset quota exceeded!");           }       }   },` 

i'm trying display 'list' this: <div data-bind="foreach: setpreset"> <span style="border: 1px solid" data-bind="text: ourlocation"></span> </div> , because nothing saving, therefore nothing displaying. view, particular bit, defined setpreset: function () { self.setpreset.apply(self); }, var self = this;

i have tried assigning observablearray - code doesn't work.

i believe want use html5 localstorage accomplish this.

https://developer.mozilla.org/en-us/docs/web/api/window/localstorage

you'll able storage presets localstorage, load them user.