Web Storage API, sometimes referred to as Web Storage or local storage, allows you to store persistent key-value pairs of data on the client-side. There are two kinds of Web Storage available: session and local storage. This article will explain how each kind works and when to use them in your application, as well as provide code examples and suggestions for further reading.
Table of Contents
What is web storage?
Web storage is a feature that allows you to store data locally. It’s available in HTML5 and can be used for various purposes, from saving information entered by users or tracking user actions on your website, or storing sensitive information like passwords. The keywords here are local and sensitive—Web storage is completely different from cookies.
What types of data can I store in web storage?
HTML5 web storage has two types of data: session storage and local storage. Session storage is used when you need the information to be retained over several page loads, but it doesn’t have to persist beyond an individual browsing session (for example, if a user navigates away from your site, closes their browser tab, or quits their browser). Local storage, on the other hand, is used for data that needs to persist between page loads.
The main security concerns with web storage are related to where and how you store your data. The first rule of thumb is: that if it can be accessed from a script on your domain, then it needs some form of protection. We’ll go over those types of protection in a minute, but for now, let’s start with where we’re allowed to use them.
Since cookies have been around for almost 20 years, they can feel old-fashioned and outdated. With new web APIs like IndexedDB and WebSQL now available, cookies should be avoided unless absolutely necessary. Here are some best practices for using cookies in a professional setting