Web Storage: client-side data storage
The localStorage attribute is an object provided by the www.w3.org specification under Candidate Recommendation review. This specification defines an API for persistant data storage of key-value pair data in Web clients. Web Storage offers two different storage areas, local storage and session storage which differ in scope and lifetime. Data placed in local storage is per domain for each client and persists after the browser is closed.
Here is a simple demo html file for local storage...
<!DOCTYPE html>
<!-- LocalStorageDemo.html -->
<html>
<head>
<title>Web Storage Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript">
window.onload = function(){
loadvalues();
};
function loadvalues(){
getthestuffLocal();
}
function savethestuffLocal(){
var object = document.getElementById("localinput");
var thevalue = object.value;
localStorage.setItem(1, thevalue);
getthestuffLocal();
}
function getthestuffLocal(){
var data;
var thediv = document.getElementById("displaylocal");
data = localStorage.getItem(1);
if (data){
thediv.innerHTML = "The value is "+data;
}
}
</script>
</head>
<body>
<h1>Web Storage Example</h1>
<h2>Local Storage</h2>
<div id="displaylocal">Seems there is nothing stored in local storage yet</div>
<input type="text" name="" value="" id="localinput" />
<a href="javascript:savethestuffLocal();">Save it!</a>
<p id="local_storage_infio">This data is stored using Local Storage. Which means that even if you close the page, and re-open it, the data you saved should be loaded again.</p>
</body>
</html>
Here, we look at a simple demo (from the code above) for local storage...
Web Storage Example
Local Storage
Seems there is nothing stored in local storage yet
Save it!
This data is stored using Local Storage. Which means that even if you close the page, and re-open it, the data you saved should be loaded again.
When you type something in the input box above and click "Save It!" the data is stored on your local system in your browsers Local Storage area for the domain blog.poling.org and the local path (in my case)...
/Users/drew/Library/Application Support/Google/Chrome/Default/Local/Storage/http_blog.poling.org_0.localstorage
This file is in the SQLite format 3 binary format for Chrome and contains the key 1 and value of the data entered...
$ cat Local\ Storage/http_blog.poling.org_0.localstorage
?????z!11?tableItemTableItemTableCREATE TABLE ItemTable (key TEXT UNIQUE ON CONFLICT REPLACE, value BLOB NOT NULL ON CONFLICT FAI1test1indexsqlite_autoindex_ItemTable_1ItemTable
You can also see the data from Chromes Developer tools, open VIEW --> Developer > Developer Tools
then click on Resources, under Local Storage click on blog.poling.org to see the value...
For more info you can take a look at Shwetank Dixit's post on Web Storage.
Next time I will take a look at HTML5 Filesystem.
