?
Solved

localStorage problem

Posted on 2014-03-21
3
Medium Priority
?
217 Views
Last Modified: 2014-03-28
Hi,

I have a problem with accessing the localStorage values in my HTML5 application.

I am setting the localStorage key, groups at the top of my javascript file to an object as follows...

localStorage.setItem('groups', JSON.stringify(groups));

Open in new window


Within the document.ready part of my script I attempt to retrieve the value as follows...

function ShowList() {
    var groups = JSON.parse(localStorage.getItem('groups'));
    console.log(groups);
}

Open in new window


Inspecting the Firebug console shows, undefined for the log.  However, if I place an alert("HELLO") before groups is defined, the localStorage object is returned correctly...

function ShowList() {
    alert("HELLO");
    var groups = JSON.parse(localStorage.getItem('groups'));
    console.log(groups);
}

Open in new window


I think this may be to do with the DOM lifecycle, but can't figure it out.  

PLEASE HELP!!!
0
Comment
Question by:nickmarshall
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 13

Expert Comment

by:devlab2012
ID: 39944908
Do you have both the statements setItem and getItem in the same script file?

It might be the order in which you are using the javascript files. In general, localStorage is available in the document.ready and you may use it without any issue. Following is a simple HTML page, that uses the same code as listed by you:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script language="javascript" type="text/javascript">

        var groups = "Test localStorage";
        localStorage.setItem('groups', JSON.stringify(groups));

        $( document ).ready(function() {
            //SaveList();
            ShowList();
        });

        function ShowList() {
            var groups = JSON.parse(localStorage.getItem('groups'));
            console.log(groups);
        }
    </script>
</head>

<body style="width:220px;">
This is HTML body.
</body>
</html>

Open in new window


NOTE: To test the above code, make sure that you correctly include the jquery file referenced in this code.
0
 
LVL 1

Accepted Solution

by:
nickmarshall earned 0 total points
ID: 39949690
I was resetting the localStorage at the beginning of my script - Removing this fixed the issue.
0
 
LVL 1

Author Closing Comment

by:nickmarshall
ID: 39961064
Fixed myself.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you haven’t already, I encourage you to read the first article (http://www.experts-exchange.com/articles/18680/An-Introduction-to-R-Programming-and-R-Studio.html) in my series to gain a basic foundation of R and R Studio.  You will also find the …
This article will show, step by step, how to integrate R code into a R Sweave document
The viewer will be introduced to the technique of using vectors in C++. The video will cover how to define a vector, store values in the vector and retrieve data from the values stored in the vector.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question