Local/Session Storage of JavaScript variable - How To?

+1 Kaveh Greenwood · August 12, 2014
I've been working a project to teach myself a couple things with JavaScript and I'm stumped right now.

First, I wanted to display a unique URL as the header text on a page, and replace the "+" in the URL with spaces. I was able to successfully complete that part of the script.

For example, when the user goes to http://example.com/default.aspx?Name=Caddo+Name, the text "Caddo Name" is displayed in the header.

Now, I'd like to store this variable and use it across all pages. The variable becomes undefined once moving to another page.

Script to parse URL in HEAD portion of document and replace "+":


   function getQueryVariable(variable) { 
   var query = window.location.search.substring(1);
   var newQuery = query.replace(/\+/g, " ");
   var vars = newQuery.split("&");
   for (var i=0;i<vars.length;i++) { 
     var pair = vars.split("="); 
     if (pair[0] == variable) { 
       return pair[1]; 
     } 
    }  
   }



Script & HTML to display name from url to text:

  <div id="Container">
    <img id="Image" class="headlogo" src="/images/header.png"/>
    <p id="Name">
     <script>document.write(getQueryVariable("Name"));</script>
    </p>
  </div>


I've read a little on localStorage & sessionStorage similar to my issue on StackOverflow and other various google search results, but I am very unsure on how to implement this within the current scripts I finally got together.

I really need to get this variable to store and be able to use it on all pages. PHP/MySQL is no longer an option. Any help will be much appreciated. Thank you!

Post a Reply

Replies

Oldest  Newest  Rating
+1 Kaveh Greenwood · August 12, 2014
Definitely, I've learned a lot today with JavaScript. Thank you for your input and help!

I'll have to play with it more. It's always frustrating sorting bugs out and figuring it out, but once it's working, it's a huge sense of accomplishment.
+1 Kaveh Greenwood · August 12, 2014
I added an if statement to my original function to check to see if there was in an item in local storage. It now functions damn properly. I guess sometimes I gotta write it out as if I have a problem and I eventually get it. :D :D

function getQueryVariable(variable) { 
  var name = localStorage.getItem ("Name");

 if (name == null){

  var query = window.location.search.substring(1);
  var newQuery = query.replace(/\+/g, " ");
  var vars = newQuery.split("&");
  for (var i=0;i<vars.length;i++) { 
    var pair = vars.split("="); 
    if (pair[0] == variable) { 
      localStorage.setItem("Name", pair[1]);
      return pair[1]; 
    } 
  }  
 }

 else{
  return name;
}
}
0 Kaveh Greenwood · August 12, 2014
Thank you for assistance Wheatly! 

My problem here is that my brain is so friend right now I am unsure on how to implement the variable I defined into a cookie/localStroage and use it across all pages. (Normally use JavaScript for making webpages dynamic & flashy)
  • 1

Javascript

106,941 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators