HTML5 Local Storage - window.localStorage
Complete Guide on HTML5 Local Storage
HTML5 Web Storage
Persistent Local Storage
With persistent local storage, web applications can store data locally within the user's browser without depend on third party plugins. Before HTML5, web application data had to be stored in cookies, included in every server request. 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) and information is never transferred to the server. Local storage is per domain. All pages, from one domain, can store and access the same data.
Data stored in either localStorage is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP is put in a different localStorage object from the same site accessed with HTTPS.
The keys and the values are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
Which Web Browsers Support Local Storage (a storage API on the window object) ?
Local storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari. Internet Explorer 7 and earlier versions, do not support Web Storage.
What are Local Storage Objects ?
Local Storage Objects are used to store data locally (in a web browser) in web applications.
What is the Local Storage in HTML5 ?
The local storage is a type of HTML5 offline storage ( local storage ) that allows user's data to be saved in their browser. The data is kept in a name and value pairs and not available between different browsers on the same device. Local storage can be used as an alternative to cookies.
How Many Types of Storage Objects available in HTML5 ?
HTML5 local storage provides two objects for storing data on the client.
- window.localStorage : stores data with no expiration date.
- window.sessionStorage : stores data for one session, data is lost when the browser tab or window is closed.
How to check browser support for localStorage and sessionStorage
Before using web storage, check browser support for localStorage and sessionStorage.
How to check html5 local storage Example
<!doctype html>
<html>
<head>
<title>How to check browser support for localStorage and sessionStorage</title>
</head>
<body>
<script>
if(typeof(Storage) !== "undefined")
{
alert("localStorage / sessionStorage is supported by your browser");
}
else
{
alert("Web Storage is not supported by your browser");
}
</script>
</body>
</html>
What is localStorage Object ?
The window.localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed.
How to create localStorage in HTML5
How to Use html5 local storage ?
HTML5 Local Storage Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>How to create localStorage in HTML5</title>
</head>
<body>
<div>User ID is : <span id="uid">Not created At</span></div>
<script>
if(typeof(Storage) !== "undefined")
{
alert("localStorage / sessionStorage is supported by your browser");
// Store the data in localStorage object
localStorage.setItem("user", "U0001");
// Retriving the stored data from localStorage object
document.getElementById("uid").innerHTML = localStorage.getItem("user");
}
else
{
alert("Web Storage is not supported by your browser");
}
</script>
</body>
</html>
What is sessionStorage Object ?
The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser tab.
How to create sessionStorage in HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>How to create sessionStorage in HTML5</title>
</head>
<body>
<button onclick="setClickCount();">Click Me For Click Count</button>
<div>Button Clicked <span id="click-counts"></span> Times</div>
<script>
function setClickCount()
{
if(typeof(Storage) !== "undefined")
{
if (sessionStorage.my_click_count)
{
sessionStorage.my_click_count = Number(sessionStorage.my_click_count) + 1;
}
else
{
sessionStorage.my_click_count = 1;
}
// Retriving the stored data from localStorage object
document.getElementById("click-counts").innerHTML = sessionStorage.my_click_count;
}
else
{
alert("Web Storage is not supported by your browser");
}
}
</script>
</body>
</html>
How Persistent is HTML5 localStorage in Different Browsers ?
Mozilla implements local storage like cookies
Chrome implements local storage like cache.
In DOM Storage it is not possible to specify an expiration period for any of your data. All expiration rules are left up to the user. In the case of Mozilla, most of those rules are inherited from the Cookie-related expiration rules. Because of this you can probably expect most of your DOM Storage data to last at least for a meaningful amount of time.
Is Local Storage Secure Storage ?
No, local storage is not secure storage. Because HTML5 local storage saves data unencrypted string form in the regular browser cache. Persistence on disk until deleted by user (delete cache) or by the app.
Cookies and local storage really serve difference purposes. Cookies are primarily for reading server-side, local storage can only be read client-side.
Is Local Storage Persistent ?
Similar to cookies, local storage is designed to a dependable, persistent browser data storage on the clientside. However, it is not permanent. The data stored with it is specific to the user and their browser. While other web apps are unable to read from it.
How can I See Local Storage Data ?
Similar to cookies, local storage data can be inspected using browser developer tools. They allow a user to remove any stored data and see what exact value is actually being stored in local Storage.
In Chrome press F12 or Ctrl+Shift+l then go to Application section ( Application Tab ) click on Local Storage.