Page 1 of 1

HTML5 Local Storage: What it is, How it works, and How YOU can use it. Rate Topic: -----

#1 X@MPP  Icon User is offline

  • 僕わ馬鹿ですね?
  • member icon

Reputation: 36
  • View blog
  • Posts: 1,014
  • Joined: 20-February 09

Posted 24 September 2011 - 05:59 PM

Long time no see fellow DiCers!

If you did not gather from the title, im going to be showing you how to use HTML5's Local Storage. For this Tutorial im going to assume you know Javascript and HTML as well as that you know you need to check for Browser comparability for Local Storage.

Now you may be asking yourself, "What is this 'Local Storage' you speak of?" Well To put it simply Local Storage is a Method of storing Data Client side for Web pages to access later. "Thatch Nifty, but how does it work?" you then say. It works by using Javascript API's that the web browser offers. these API's give you assess to the Browser Database, the database being a Key-Value Store. If you don't know that a Key-Value store is, its basically a way to store and retrieve information based on a "key" and you get a "value" in return. Now enough of the boring stuff lets get some code going!

First off we need something to show, and get input from so lets make a basic Contact From.
<!DOCTYPE html>
<html>
<head>
   <title>My Epic Contact From</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(function(){
       //when the dom is ready
    });
   </script>
</head>
<body>
   <form id="contact">
     Name:<input type="text" name="Name" /><br />
     Email:<input type="text" name="email /><br />
     Comment:<br />
     <textarea name="comment">
     </textarea>
    <input type="submit" value="Send" id="send" /> <input type="button" value="Save" id="save" />
   </form>
<body>



So there is the basic HTML and Javascript we will be using. now to Give you a chunk of Javascript and explain it to you.
$(function(){
  //when the Dom is Ready
  $('#save').click(function(){
    localStorage.setItem("SvCntDtaDomain", "1");
    var dta = $('#contact').sterilizeArray(); 
    $.each(dta, function(i ,obj){
       localStorage.setItem(obj.name, obj.value);
    });
    return false;
  });
  $('#send').click(function(){ return false; });
  if(localSotrage.getItem("SvCntDtaDomain") == "1"){
    var dta = $('#contact').sterilizeArray(); 
    $.each(dta, function(i ,obj){
       $('[name='" + obj.name + "']").val(localStorage.getItem(obj.name));
    });
  }
});


And that's it. that's all you need to save from data, and you can have a form with as meany elements as you want and it will work just the same.

But it may need some explaining so here goes nothing.

First we hook the button click event for the save and submit. and then we have our data loading loop but ill cover that in a bit. when someone clicks the save button, we will set a key in local Storage to say that we saved, then we will get all the form inputs in the form with the id of "contact", we then loop though that array and set a key/value pare in local storage with the object name as a key and its value as the value.
then return false to stop from reloading the page.

Next up is when the page loads it will look for the key "SvCntDtaDomain" and if it has a value of 1 or not. if it does we then get all the items in the form. Loop though them and select the element with he current objects name. and sets its value form the one we saved in local storage.

And thats it! your done! thats all it takes to use Local Storage, have fun and Enjoy!

Is This A Good Question/Topic? 4
  • +

Replies To: HTML5 Local Storage: What it is, How it works, and How YOU can use it.

#2 JacksonD  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 215
  • Joined: 18-October 11

Posted 21 October 2011 - 07:13 PM

I didn't know this, thankyou.
Was This Post Helpful? 0
  • +
  • -

#3 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Posted 24 April 2012 - 08:58 PM

I was just wondering about this.
Though I would like to see all the steps.
Like what would happen if you didn't use jQuery.
Was This Post Helpful? 0
  • +
  • -

#4 annaharris  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 38
  • Joined: 03-May 12

Posted 27 December 2012 - 04:33 AM

Great Job on HTML 5. As a one HTML Developer, There is a need to understand this important thing. Thanks a lot for sharing such a significant tutorial.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1