Local Storage and Session Storage PDF
Document Details
Uploaded by ReformedHammeredDulcimer
Tags
Summary
This document explains local and session storage in web development. It discusses how these methods can be used to store data on the user's computer and how web pages can maintain data across sessions, including storing JSON for data management. It avoids using generic terms in the summary.
Full Transcript
Web page memory By default, a web page doesn't have any memory. For example input given by the user on one page are gone once he visit another page. Some times we have the need for memory. E.g. a shopping cart in a webstore. Another example is a log-in site. You need memory if you wan...
Web page memory By default, a web page doesn't have any memory. For example input given by the user on one page are gone once he visit another page. Some times we have the need for memory. E.g. a shopping cart in a webstore. Another example is a log-in site. You need memory if you want to avoid that users have to log in each time they refresh the page or navigate to another page on the site. We can solve this by storing data in either: Cookies Local storage/session storage Local storage Traditionally we use cookies to store data locally. This is a text-file that resides on the user PC and contains information that should be stored until the next time the user request the webpage. Cookies are usually initiated by the server, but it is also possible to crate cookies on the client using JavaScript Local storage is a more simple and flexible option to store text-data. We can think of this as a storage inside the web browser Every domain/websites are given access to it’s own part of the Local storage in the users browser. Local storage The local storage API is simple. You only need to use a few functions in the local storage object: localStorage.setItem("name", "value"); - stores a value localStorage.getItem("name"); - retrievs a value localStorage.removeItem("name"); - removes a value localStorage.clear(); - clears the local storage (remove everything) You can store about 5 – 10 Mb of data per domain. Compare this to cookies which can only store 4kb med data Storing JSON If you want to store a lot of data it's common to format the text to JSON so it becomes more easy to retrive the data later on To convert an object to JSON-text use: var jsonText = JSON.stringify(obj) To convert a JSON-text to an object use: var obj = JSON.parse(jsonText) Session storage Sometimes you want the stored information to automatically be deleted when the browser is closed, e.g., when you are storing information that is used for authentication. Then you can use Session storage. The Session storage has the same API as Local storage: sessionStorage.setItem("name", "value"); - stores a value sessionStorage.getItem("name"); - retrievs a value sessionStorage.removeItem("name"); - removes a value sessionStorage.clear(); - clears the session storage (remove everything) Indexed DB An alternative to using Local storage is Indexted DB. This is a local database in the browser that we can use to store data. Instead of tables with columns the database use an "object-store" where each row is an object (associative array) The communication with the database is asynchronous. That means we have to use event- handling to communicate with the database We are not going to use the indexed DB in this course.
