Everything You Need to Know About Client-side Storage

awesome-web-storage

Everything you need to know about Client-side Storage.

Table of Contents

• Introduction
• Browser Support
• Cookies
  • Pros
  • Cons
  • API
  • Useful resources
• LocalStorage
  • Pros
  • Cons
  • API
  • Useful resources
• SessionStorage
  • Pros
  • Cons
  • API
  • Useful resources
• Comparison Table
• PostMessage
  • Pros
  • Cons
  • API
  • Security concerns
  • Useful resources
• FAQs
• Contributing
• License

Introduction

What is Web Storage

Web storage, sometimes known as DOM storage (Document Object Model storage), provides web application software methods and protocols used for storing data in a web browser.

Web storage is being standardized by the World Wide Web Consortium (W3C). It was originally part of the HTML5 specification, but is now in a separate specification.

Modern websites and web applications these days are becoming smarter than before and to achieve such smartness, the data storage system plays a very crucial role. Be it storing visitors' data & settings or any kind of information, web-storage is a breakthrough in the history of web applications. It offers a very basic need of storing persistent data in the browser itself which has literally spurred up its application from game-changing novelty to must-have features.

Usually, this kind of data doesn't need a well-organized backend database. The purpose of the data varies as per the website/webapp requirements. Different pages of the same website need to share data among themselves to behave alike and perfectly. This sharing of data among windows/tabs is very common these days and most of the sites or web apps use it for various jobs like User Authentication, Personalization (showing different views to a new visitor and on subsequent visits), Tracking user behavior, etc.

Before HTML5, storing application level data was possible only using cookies. Cookies can store up to 4KB of data, including the bytes consumed by the cookie name. This domain-specific data is sent along with every browser request. With the advent of HTML5, it's much easier now to store structured data on the client-side securely and faster than ever. HTML5 introduced the concept of Web Storage. Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. HTML5 introduces two such web storage mechanisms: LocalStorage and SessionStorage. There are so many limitations in using cookies which can now be overcome using web storage.

There's no term as "Perfectly Secured Persistent Storage" available in the browsers as any type of storage system( persistent or non-persistent) can be manually tweaked by the end-user(assuming she knows a bit of geeky stuff :P).

Web Storage concepts and usage

The two mechanisms within Web Storage are as follows:

1. sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
2. localStorage does the same thing, but persists even when the browser is closed and reopened.

Web Storage interfaces

Storage

Allows you to set, retrieve and remove data for a specific domain and storage type (session or local.)

Window

The Web Storage API extends the Window object with two new properties — Window.sessionStorage and Window.localStorage — which provide access to the current domain's session and local Storage objects respectively, and a Window.onstorage event handler that fires when a storage area changes (e.g. a new item is stored.)

StorageEvent

The storage event is fired on a document's Window object when a storage area changes.

Browser Support

IE / Edge	Firefox	Chrome	Safari	Opera
IE8+, Edge12+	3.5+	4+	4+	11.5+

Different Storage APIs

Following are various storage techniques which HTML5 storage provides. Each technique has its own pros and cons.

Cookies

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. The browser may store it and send it back with the next request to the same server. Typically, it's used to tell if two requests came from the same browser — keeping a user logged-in, for example. It remembers stateful information for the stateless HTTP protocol.

Pros:

• Session Management - Easy to use with logins, shopping carts, game scores, or anything else the server should remember

Cons:

The 4K limit is for the entire cookie, including name, value, expiry date etc. To support most browsers, keep the name under 4000 bytes, and the overall cookie size under 4093 bytes.

The data is sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - increasing the amount of traffic between client and server.

Typically, the following are allowed:

• 300 cookies in total
• 4096 bytes per cookie
• 20 cookies per domain
• 81920 bytes per domain(Given 20 cookies of max size 4096 = 81920 bytes.)

API

Read

Reading all cookies accessible from the domain

var allCookies = document.cookie;

Write

Writing a new cookie on a domain

document.cookie = newCookie;

As mentioned in the mdn docs, any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator:

;path=path - (e.g., '/', '/mydir') If not specified, defaults to the current path of the current document location.

;domain=domain - (e.g., 'example.com' or 'subdomain.example.com').

;max-age=max-age-in-seconds - (e.g., 60*60*24*365 or 31536000 for a year)

;expires=date-in-GMTString-format - If not specified it will expire at the end of a session.

;secure - Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.

Resources - more on cookies

• Blogs
  • Types of cookies Google uses
  • Securing cookies
  • HTTP Cookies explained
• Libraries
  • js-cookie
  • Cookies
  • AngularJS Cookies
  • ReactJs Cookies
  • Vuejs Cookies
• Browser Extensions
  • EditThisCookie(For Chrome) - Open source Chrome extension which does it all!
  • Cookies(For Chrome) - A powerful and easy-to-use Cookie Editor.
  • Cookie Inspector(For Chrome) - Edit and create cookies right in the Developer Tools.
  • EditThisCookie(For Firefox)
  • Cookies Manager+ - To view, edit and create new cookies.
  • Vanilla Cookie Manager(For Chrome) - A Cookie Whitelist Manager that helps protect your privacy. Automatically removes unwanted cookies.

localStorage

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

Pros:

If you look at the Mozilla source code it can be seen that 5120KB (5MB which equals 2.5 Million characters on Chrome) is the default storage size for an entire domain. This gives you considerably more space to work with than a typical 4KB cookie.

The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server.

The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.

Structured data can be stored but it has to be stringified before storing.

Simple API to save, update, and delete data.

Cons:

It works on same-origin policy. So, data stored will only be available on the same origin.

It stores everything as a string.

API

setItem

getItem

removeItem

clear

key

length

Resources - more on localStorage

• Blogs
  • Storing Data on The Client with LocalStorage
  • Storing data in the browser with the HTML5 localStorage API
  • Basket.js: A JavaScript loader with localStorage-based script caching
• Libraries
  • angular-local-storage - An AngularJS module that gives access to the browsers local storage with cookie fallback.
  • react-native-localstorage - Local storage wrapper for both react-native and browser.
  • vue-local-storage - Vue.js localStorage plugin with types support.
  • localForage - Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
  • basket.js - A script and resource loader for caching & loading files with localStorage.
  • secure-ls - Secure localStorage data with high level of encryption and data compression.
• Browser Extensions
  • HTML5 Storage Manager All in One - Complete Storage Manager Extension Ever!

sessionStorage

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

Pros:

Same as localStorage

Data can only be saved per window (or tab in browsers like Chrome and Firefox). Data saved is available for the current page, as well as for the future visits to the site on the same window. Once the window is closed, the storage is deleted.

Cons:

The data is available only inside the window/tab in which it was set.

The data is non-persistent i.e. it will be lost once the window/tab is closed.

Like localStorage, it also works on same-origin policy. So, data stored on one protocol/domain/port will not be available for different protocol/domain/port.

API

setItem

getItem

removeItem

clear

key

length

Resources - more on sessionStorage

• Blogs
  • Introduction to sessionStorage
  • Web Storage API: Local Storage & Session Storage
  • Sharing sessionStorage between tabs for secure multi-tab authentication
• Libraries
  • sessionstorage - sessionStorage API which gracefully degrades to window.name & cookies when not available.
  • ngStorage - localStorage and sessionStorage done right for AngularJS.
  • react-webstorage - Use webStorage or a webStorage polyfill as a React store
• Browser Extensions
  • HTML5 Storage Manager All in One - Complete Storage Manager Extension Ever!

Comparison Table

Worth mentioning API for tackling cross-origin restriction

postMessage

One very interesting API, PostMessage is not a web-storage technique but it's the most efficient and reliable way of communicating between cross-origin browser windows/tabs. Along with web-storage APIs, it overcomes the web-storage restrictions of cross-origin.

Pros:

Safely enables cross-origin policy communication.

As a data point, the WebKit implementation (used by Safari and Chrome) doesn't currently enforce any limits (other than those imposed by running out of memory).

Cons:

Need to open a window from the current window and only then can communicate as long as you keep the windows open.

Security concerns - Sending strings via postMessage is that you will pick up other postMessage events published by other JavaScript plugins, so be sure to implement a targetOrigin and a sanity check for the data being passed on to the messages listener.

API:

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow - A reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open, or by named or numeric index on Window.frames, if you're trying to start the communication from iframe to parent window then parent is also a valid reference

message - Data to be sent to the other window. The data is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself. [1]

targetOrigin - Specifies what the origin of otherWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if postMessage() was used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.

transfer(Optional) - Is a sequence of Transferable objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no longer usable on the sending side.

Security concerns

If you do not expect to receive messages from other sites, do not add any event listeners for message events. This is a completely foolproof way to avoid security problems.

If you do expect to receive messages from other sites, always verify the sender's identity using the origin and possibly source properties. Any window (including, for example, http://evil.example.com) can send a message to any other window, and you have no guarantees that an unknown sender will not send malicious messages. Having verified identity, however, you still should always verify the syntax of the received message. Otherwise, a security hole in the site you trusted to send only trusted messages could then open a cross-site scripting hole in your site.

Always specify an exact target origin, not *, when you use postMessage to send data to other windows. A malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using postMessage.

Resources - more on postMessage:

• Blogs
  • HTML5's window.postMessage API
  • Cross-Domain Messaging With postMessage
  • The pitfalls of postMessage
  • XSS and App Security through HTML5's PostMessage()
• Libraries
  • postmate - A powerful, simple, promise-based postMessage library.
  • across-tabs - Easy communication between cross-origin browser tabs.
• Browser Extensions
  • postMessage debugger - This extension prints messages sent with postMessage to the console.

FAQs

How to store data that works Cross-Origin too?

A combination of postMessage and localStorage / sessionStorage

Using postMessage to communicate between multiple tabs and at the same time using localStorage/sessionStorage in all the newly opened tabs/windows to persist data being passed. Data will be persisted as long as the tabs/windows remain open in case of sessionStorage and in the case of localStorage unless the data is deleted by the system or manually flushing it using dev tools. So, even if the opener tab/window gets closed, the opened tabs/windows will have the entire data even after getting refreshed.

• across-tabs - Easy communication between cross-origin browser tabs

Contributing Guidelines

Please ensure your pull request adheres to the following guidelines:

• Search previous suggestions before making a new one, as yours may be a duplicate.
• Make sure the list is useful before submitting. That implies it has enough content and every item has a good succinct description.
• Make an individual pull request for each suggestion.
• Use title-casing (AP style).
• Use the following format: [List Name](link)
• Link additions should be added to the bottom of the relevant category.
• New categories or improvements to the existing categorization are welcome.
• Check your spelling and grammar.
• Make sure your text editor is set to remove trailing whitespace.
• The pull request and commit should have a useful title.
• The body of your commit message should contain a link to the repository.

Author: Softvar
Source Code: https://github.com/softvar/awesome-web-storage 
License: 

#javascript #cookies #localstorage 

React Tutorial: Create a ToDo app with localStorage

In this tutorial, I have developed a Todo app with localStorage using reactJS. For the design, I used CSS, bootstrap, and material icons. if you have any doubts, please comment below.

You can check the code in the below link.
Git repo : https://github.com/voranzovv/react-todo-with-localStorage

#react  #tutorial  #localstorage 

Curso de Angular - Servicio de LocalStorage | Almacenamiento

Implementación muy simple para tener LocalStorage en #Angular, basado en #JavaScript

Repositorio: https://github.com/ibuioli/ng-localstorage

#angular #localstorage #javascript

Local storage crash course in Hindi 2021 🔥

Local storage crash course in Hindi in 2021 🔥
Support this channel: https://www.youtube.com/channel/UCo9xTRmg1SqQ5JSsA2fAgJw/join

Source code: https://github.com/codersgyan/local-storage-crash-course

In this video, We are going to explore the Local storage of the browser.
We will be covering almost all the storage methods.
We will be covering storage events as well to sync the data among the browser tabs.

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I’ve started using Kite and I love it!
https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codersgyan&utm_content=description-only

NodeJs crash course: https://youtu.be/wdBCoRMMxto
Express Js crash course: https://youtu.be/46Mjvdv_UUM
Realtime pizza app using Node Js: https://www.youtube.com/playlist?list=PLXQpH_kZIxTVRmXQN9J0Az76te5mAreLV
Flexbox: https://youtu.be/7WE_K7NDL0s
XHR and Fetch in Javascript:
https://youtu.be/D5WkKTorCqo

You may connect with me:
Facebook - ✅ https://www.facebook.com/codersgyan
Discord - ✅ https://discord.gg/WPfWD3B
Telegram - ✅ https://t.me/joinchat/AAAAAFbBD_inny1ksCzOvA
Instagram - ✅ https://www.instagram.com/codersgyan
Twitter - ✅ https://twitter.com/CodersGyan

You may support this channel by becoming a patron :)
✅ https://www.patreon.com/codersgyan

Timestamps :-
0:00:00 - Intro
0:01:24 - Project setup
0:19:20 - Use cases
0:23:06 - Storage events
0:39:32 - Error handling
0:50:13 - Wrap up

#localstorage #storage #browserStorage #storageEvents

#localstorage #storage #browserstorage #storageevents

How to Store Login Sessions with LocalStorage and SessionStorage

JavaScript is a lightweight scripting language, yet it provides such a great number of functionality, from making dynamic webpages to creating servers, mobile applications, etc. Two of the great functionalities Modern JavaScript can work with, are LocalStorage and SessionStorage.

LocalStorage vs SessionStorage

Both can be accessed from Inspect Element > Application > LocalStorage or SessionStorage . Their names specify the difference between them, both store the information, but SessionStorage stores it for the current session while LocalStorage stores the information locally on your system.

When you change your current tab or browser window, the session expires, and hence, information is lost automatically, while LS doesn’t work that way!

So, for storing user information like user ID and password, we will use LocalStorage and the currently logged-in user’s info will be visible inside the SessionStorage itself! Pretty cool stuff👩🏻‍💻!

#localstorage #javascript #programming

Understanding JavaScript Storage Events

https://www.youtube.com/watch?v=WxnjkZRt3_Y

Learn how to work with HTML5 LocalStorage and SessionStorage events so that you can keep your user’s data synced across multiple windows and tabs.

#javascript #es6 #js #web-development #localstorage

Practical Coding with LocalStorage

https://www.youtube.com/watch?v=Lu-eBtYTRBY

Building a simple web app that uses localStorage to interactively save form data and build navigation components.

#web-development #js #javascript #localstorage

LocalStorage vs. Cookies: All You Need to Know About Storing JWT Tokens Securely in the Front-End

Access tokens are usually short-lived JWT Tokens that are signed by your server and are included in every HTTP request to your server to authorize the request. Refresh tokens are usually long-lived opaque strings that are stored in your database and used to get a new access token when it expires.

Where should I store my tokens in the front-end?

There are two common ways to store your tokens. The first is in localStorage and the second is in cookies. There is a lot of debate over which one is better with most people leaning toward cookies as they are more secure.

Let’s go over the comparison between localStorage and cookies.

Local Storage

Pros: It’s convenient.

• It’s pure JavaScript and it’s convenient. If you don’t have a back-end and you’re relying on a third-party API, you can’t always ask the third-party API to set a specific cookie for your site.
• Works with APIs that require you to put your access token in the header, like this: Authorization Bearer ${access_token}.

Cons: It’s vulnerable to XSS attacks.

An XSS attack happens when an attacker can run JavaScript on your website. This means that the attacker can take the access token that you stored in your localStorage. An XSS attack can happen from a third-party JavaScript code included in your website like React, Vue, jQuery, Google Analytics, etc. It’s almost impossible not to include any third-party libraries in your site.

#jwt #localstorage #cookies

SessionStorage and LocalStorage: A UX/Security Comparison

As web developers, it is common to store data in web browsers to improve user experience and performance of the web apps. In most of the cases, we either use LocalStorage or SessionStorage.

In this article, let’s evaluate SessionStorage and LocalStorage considering Web Security and User Experience. We will thendiscuss how to pick the right one for your requirement.

Introduction to SessionStorage and LocalStorage

LocalStorage and SessionStorage are browser storage features introduced in HTML5. It allows saving data in key-value pairs in web browsers via JavaScript. Usually, most of the browsers support up to 5MB browser storage and will enable us to save more data efficiently.

How to use SessionStorage and LocalStorage

You can use the browser window object to access SessionStorage. Have a look at the example below.

sessionStorage = window.sessionStorage

Similarly, you can access LocalStorage from the window object.

localStorage = window.localStorage

The followings are the functions available for both storage types.

//saving an item
  storage.setItem('name', 'Alice')
  storage.setItem('age', '5')

//read an item
  storage.getItem('name') // returns "Alice"
//get storage size
  storage.length // returns 2
//get key by index
  storage.key(0) // returns "name"
//remove an item
  storage.removeItem('name')
//clear storage
  storage.clear()

#security #javascript #sessionstorage #frontend-development #localstorage

How to Create a Todo App with React Hooks and LocalStorage

New to React? Curious to know how to get up and running with the library and want to make use of the latest features. Then this Todo app will be a great starting point for you!

We won’t be focusing much on the styling of our app here.

Let’s now create the React app. For that, let’s fire up our terminal in our main project directory and write the following command:

npx create-react-app .

This command helps you to install everything you need to setup a react app.

Once the installation of our React app is complete, let’s install a package. For that let’s open up the terminal in our main project directory and write the following command:

npm i bootstrap

#javascript #web-development #react #localstorage

How To Implement localStorage or Firebase Firestore into your JS project

I am a great reader, I love books and I try to read as much as I can, no matter the topic, whatever, fantasy, comedy, sci-fi, educational…Books take me to another world, they make me feel, make me think, make me relax and make me disconnect from the day by day schedule. I cannot live without them.

This is why my first approach to Javascript was to create a Library to store my books, with some information about them ( title, author, number of pages…) and if I read it or not. I know, it was a small, simple project, but what do you expect? It was my very first one, so I only wanted to practice as much as I could and make it work.

So, I created my HTML file, my script.js file and worked a bit on my CSS to build something nice to my eyes. After working on it for a while, I got my site looking good and my library working fine. I had a table with my books, with all the information related and a “NEW BOOK” button that brought up a form allowing me to input the details for a new book to add to the library.

All the books were an instance of the constructor Books, with a prototype to toggle the read status and all of them stored in an array. Something like this:

function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;
}

Book.prototype.info = function () {
    return this.title + " by " + this.author + ", " + this.pages + " pages, " + this.read;
}
Book.prototype.toggleReadStatus = function () {
    this.read = this.read == 'Read' ? 'Not read' : 'Read';
}

let myLibrary = [];

Perfect! I was so happy so I started to add read books and books that I planned to read, I spent some time with it. Actually, it was my first JS creation and wanted to play around a bit. After all the work I went to have lunch and went came back to my computer and opened my page again…surprise!

No one book there, all of them gone! My array was empty, and all my previous work adding content as well.

Bad luck or just a beginner mistake, I thought all the data will remain in my array and would keep it there forever, but it is not working that way. After some research on the web, I understood that I needed to store the data somewhere or it would vanish every time I refreshed the page.

#javascript #localstorage #firebase #software-development #learning-to-code #coding #storage #cloud-storage

How to Use local storage in Flutter

Sometimes there are just some things that need to be stored locally in your app. Dates, values, numbers, etc. Luckily, Flutter has a package (Shared_Preferences) that will handle this for both Android and iOS devices without any special configurations needed. It’s important to note that you should not store critical data locally. All important, critical data should be stored in a backend of your choosing. Shared_Preferences is meant to store simple data. Let’s walk through an example.

Importing: https://pub.dev/packages/shared_preferences

#flutter-widget #localstorage #flutter #data

Cookie vs Session vs Local Storage vs Session Storage in Web Development 🔥🔥

Cookie vs Session vs Local Storage vs Session Storage 🔥🔥

The ability to quickly store information on a user’s browser is an incredibly under used, powerful feature of JavaScript, and this is partially because of how unwieldy it used to be. In this video I am going to discuss the differences between cookies, local storage, and session storage, and how dealing with browser storage has become much easier since the initial release of cookies. I will also talk about how to use cookies, local storage, and session storage to store information in a users browser.

Topics Covered:

1). Cookie vs Session

2). Local Storage vs Session Storage

Visit Technical Suneja official website : http://technicalsuneja.com/

Don’t forget to hit the Subscribe Button Below: https://www.youtube.com/technicalsune…

#web development #localstorage #cookies

A Complete Guide to LocalStorage in JavaScript - Part 2

Before starting this article, I want to take a moment to thank you guys for so much loving and support to the first part of this article, I got an amazing response on that and many people texted me saying it was amazing and they are eagerly waiting for the second part.

So yes, your wait is over, and lets get started!

Let’s recapitulate what all we have covered —

So last weekend, I released the first part of the article, “A Complete Guide to LocalStorage in JavaScript: Part-1” in which I introduced you with the theoretical details of the JavaScript localStorage, which were as follows —

• What is localStorage?
• Methods and Properties provided by Storage Object
• Browser compatibility with localStorage
• Limitations of localStorage

A Complete Guide to LocalStorage in JavaScript - Part 1

#web-development #javascript #localstorage

A Complete Guide to LocalStorage in JavaScript - Part 1

This article is divided into of two parts:

• Part-1: Theoretical Explanation
• Part-2: Practical Implementation

A Theoretical Explanation for localStorage

What is a localStorage?

localStorage is a type of web storage that allows JavaScript sites and apps to store and access data right in the browser with no expiration date. This means the data stored in the browser will persist even after the browser window has been closed. The stored data is saved across browser sessions.

Data in a localStorage object created in a “private browsing” or “incognito” session is cleared when the last “private” tab is closed.

Methods and Properties provided by Storage Object

• setItem(key, value) – store key/value pair.
• getItem(key) – get the value by key.
• removeItem(key) – remove the key with its value.
• clear() – delete everything.
• key(index) – get the key on a given position.
• length – the number of stored items.

Don’t be confused, I’ll be covering each of them individually with detailed explanation.

A Complete Guide to LocalStorage in JavaScript - Part 2

#javascript #web development #localstorage