?
Solved

localStorage problem

Posted on 2014-03-21
3
Medium Priority
?
221 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
  • 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
When we want to run, execute or repeat a statement multiple times, a loop is necessary. This article covers the two types of loops in Python: the while loop and the for loop.
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

840 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