SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    setItem and getItem for localStorage code not working

    I am trying to get a field to save to localStorage automatically when entered, then, if the page is refreshed, load the data automatically into the field, then tap a button to remove the data. So far, the following code does not work (refreshing the page does not recall the data).

    Can you point out where I'm going wrong? This is a test case for using setItem and getItem. Chrome Tools reports no errors in console.

    HTML Code:
    <!DOCTYPE html> 
    <html> 
    	<head> 
    	<title>testing localStorage</title> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">        
    
    <script type="text/javascript" src="../jquery/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="../jquery/jquery.mobile-1.0rc1.js"></script>
    <link type="text/css" rel="stylesheet" href="../jquery/jquery.mobile-1.0rc1.css" media="screen" /> 
    
    <script type="text/javascript">
    
    function setItemForm1b()
    {
        var SOneDateFrom = document.getElementById("SOneDateFrom");
        localStorage.setItem("SOneDateFrom", JSON.stringify(SOneDateFrom.value)); 
    }           
      
    function getItemForm1b() {
        var SOneDateFrom = JSON.parse(localStorage.getItem("SOneDateFrom")); 
    }
    
    function deleteStorage() {
        localStorage.clear();
    }
    
    </script>
    </head> 
    
    <body>
                   
                    
    <div data-role="content">
    <form name="form1b">    
                                 
    <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" onclick="setItemForm1b()">setItem</a>
    <a href="#" data-role="button" onclick="getItemForm1b()">getItem</a>
    <a href="#" data-role="button" onclick="deleteStorage()">remItem</a>
    </div>
    <br>               
                        <ul data-role="listview" data-dividertheme="b">                        
                            <li data-role="list-divider">Event Information</li>
                            <li>Event Date: From<br>
                                <input type="text" name="SOneDateFrom" id="SOneDateFrom" class="singleline" data-role="none" onchange="setItemForm1b()">
                                
                            </li>
                         </ul>
                        
                    </form>
    </div>  <!--content-->
                    
                    <div data-role="footer">
                        <p class="footer-image"><img src="../SC10images/copyright.png" alt="" width="100%"></p>
                    </div><!-- /footer -->
                </div><!-- /page -->
                
                
                
      
    <script type="text/Javascript">
    getItemForm1b();
    $(document).delegate("textarea,select,input[type='text']","change",
    function() { setItemForm1b($(this)); 
    }
    );
    </script>      
        
    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Good news! I got the script to work at last, BUT when the page is reloaded, there are quotes around the figure entered. What should I change to keep the quotes from appearing? Here's the script so far (everything else around the web page is the same as the OP).

    Code:
    function setItemForm1b()
    {
        var form1b = document.getElementById('form1b');
        var SOneDateFrom = document.getElementById('form1b.SOneDateFrom');
        localStorage.setItem("SOneDateFrom", JSON.stringify(form1b.SOneDateFrom.value)); 
        }           
      
    function getItemForm1b() {
    //    var SOneDateFrom = JSON.parse(localStorage.getItem('SOneDateFrom')); 
        var SOneDateFrom = localStorage.getItem('SOneDateFrom'); 
        alert('getItemForm1B: '+ SOneDateFrom);
        form1b.SOneDateFrom.value = SOneDateFrom; // shows quotes!
    }
    
    function deleteStorage() {
        form1b.SOneDateFrom.value = localStorage.setItem('SOneDateFrom',''); 
        if (form1b.SOneDateFrom.value === "undefined") { form1b.SOneDateFrom.value = ""; }
        alert('deleteItemForm1B: '+ SOneDateFrom);
    }

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So there's no way to get rid of the quotes around the entries?

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I will look into using regular expressions.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    You use JSON.stringify when putting the data in, so it would make sense to use JSON.parse for when retrieving it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I believe that's what I'm doing. Am I doing it wrong? I guess I don't understand your comment. Is JSON the way to get rid of the quotes?

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You use JSON.stringify when putting the data in, so it would make sense to use JSON.parse for when retrieving it.
    Thanks, I got it! Now it works.

    var SOneDateFrom = localStorage.getItem('SOneDateFrom');
    form1b.SOneDateFrom.value = JSON.parse(SOneDateFrom);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •