Different Storage Options In HTML5
Posted By : Pawanpreet Singh | 28-Dec-2017
Objective:-
- Learn various types of storage options in client side.
- Which one to use at a certain occasion.
Types:-
- Web Storage - localStorage and sessionStorage
- Web SQL
- IndexedDB
WebStorage - Web apps using web storage can save data in the local memory of person browser.
Before this data was stored in cookies. Web storage can store a large amount of application data and it's more secure than cookies. Web Storge save data based on origin, all web pages can access same data if their origin is same as (origin = www.xyz.com).
localStorage - store data in browsers memory without any expiry.
sessionStorage - store data in browsers memory for a particular session.
// Save
localStorage.setItem("name", "Pawanpreet");
// Get
document.getElementById("output").innerHTML = localStorage.getItem("name");
Web SQL - It is a web API for saving data in DB which can be accessed using SQL. Because one can access use it using SQL statements it is known as WebSql.
Main methods of webSql are as below
- openDatabase - this function will use an existing database or create the new one if not found.
- transaction - this function provides the power to control the transaction either complete it or roll back the transaction.
- executeSql - this function is used to run SQL queries.
IndexedDB - IndexedDB unlike WebSql does not save data in fixed columns but save data in the js based object-oriented database object. Using this one can save and access data using “key”. Like WebSql indexDB also work on the same origin.
Features:
-
Store data in a Key-Value form.
-
Based on Transactional DB model.
-
Most of API’s are asynchronous.
-
Uses event based on DOM to notify availability of result.
-
It is Object Oriented.
-
Does not use SQL statements.
-
Use same origin Policy.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pawanpreet Singh
Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.