Place of all tech articles

techarticles

  • Home
  • About
  • Contact Info

How to access HTML5 local storage

7th August, 2015 · techinf1

HTML5 is becoming a common platform for both Web and Apps.  I personally started learning HTML5 when I decided to develop Apps for Android and iPhone. As I failed to manage time enough to learn native App development  for Android and iPhone, I was searching for alternative technology  I already  had knowledge enough of HTML, CSS and Java Script.  Thankfully to HTML5 , I have developed some  Hybrid Apps with help of platform like Intel XDK   , Apache Cordova .  I have frequently used HTML5 local storage in all my Apps which is very fast  and consistent.

With HTML5 local storage, web applications, hybrid mobile Apps &  web Apps can store data locally within the user’s browser. Before HTML5, application data had to be stored in cookies, included in every server request. HTML5  Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB). Here I will show  how to use HTML5 local storage.   HTML5 local storage use key => value technology.

 Create a local storage object

<script type="text/javascript">

var db = getLocalStorage();

function getLocalStorage() {
try {
if(window.localStorage ) return window.localStorage;
}
catch (e){
return undefined;
}
</script>

A local storage object db is created.  Now you can  store and retrieve data from HTML5 local storage.

Store  data  to HTML5  local storage

1.  Store  string and integer

<script type="text/javascript">
db.a='test string';
db.b=12345;
</script>

Above you will find in your local storgae two keys a and b and their corresponding value will be ‘test string’ and 1234.

2.  Store JSON data to HTML5 local storage

<script type="text/javascript">

var json_data = '{"firstName":"John", "lastName":"Doe","id":123456}';
db.json_data=JSON.stringify(json_data);
 </script>

To store json object you have to use JSON.stringify() function.

 

Retrieve data from HTML5 local storage

1. Retrieve simple string and integer data

<script type="text/javascript">
if(db.a)
var a=db.a;
alert(a);

if(db.b)
var b=db.b
alert(b);

</script>

Here we retrieve  earlier stored  local storage key’s value to java script variables a and b. You should always use if(db.a) to avoid unnecessary error.

2. Retrieve JSON data from storage

<script type="text/javascript">


if(db.json_data)
var json_data=JSON.parse(db.json_data);

alert(json_data);

</script>

Following the above strategy you will store as much data as possible until storage exceeds 5MB.   In chrome browser you will directly access  your domain html5 local storage. Go to Options -> More tools -> Development tools -> Resources.

HTMl5  makes huge change in Web and Apps development and  Apps developer are shifting to HTMl5 as it is supported to all platforms ( Android, iPhone, Firefox etc. ). HTMl5 has many storage technology like local storage, IndexedDB, Web SQL, SQLite but Local Storage is supported to all browsers while others are not. Below I refrenced some Android Apps that I have built purely based on HTML5.

  1. LocationTracker
  2. DSEData
  3. Cricket Update

 

 

Posted in HTML5 |
« Embedding Google Map in webpage
Installing Nginx with PHP support »

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • Ansible Exam (RHCE 8) full solution with explanation
  • Install Ansible on CentOS 8
  • Recover MySQL 5.7 root Password in Redhat/CentOS 7
  • SSH login without password in Linux
  • How to write automated FTP script in Linux

Categories

Pages

  • About
  • aStore
  • Contact Info
  • google pagerank checker
  • SEO Keyword Rank
  • SEO Page Audit
  • Tools
  • whois

Archives

  • March 2022
  • February 2022
  • August 2017
  • May 2017
  • November 2015
  • October 2015
  • August 2015
  • May 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014

Categories

  • Adsense (1)
  • Ansible (2)
  • Database (17)
    • MySQL (15)
    • Oracle (2)
  • FTP (1)
  • Google Map (2)
  • HTML5 (1)
  • Linux (8)
    • AWK (1)
  • PageSpeed (1)
  • PHP (3)
  • phpMyAdmin (1)
  • Social Networking (1)
  • Varnish (3)
  • Webpage Optimization (1)
  • Webserver (5)
    • Apache (4)
    • Nginx (1)
  • Website Migration (1)
  • WordPress (6)

WordPress

  • Log in
  • WordPress
© Techinfobest is the house of tech articles
  • Home