Study

Resources / Notes taken from:


Table of Contents:


General Information


Feature Cookies localStorage sessionStorage
Maximum data size 4 kB 5 MB 5 MB
Blockable by users yes yes yes
Auto-expire option yes no yes
Accessible from any window any window same tab
Supported data types string only string only string only
Accessible server-side yes no no
Data transferred on every HTTP request yes no no
Editable by users yes yes yes
Supported on SSL yes n/a n/a
Can be accessed on server-side & client-side
(Server an Browser)		 client-side only
(Browser)		 client-side only
(Browser)
Clearing / deleting PHP, JS & automatic JS only JS & automatic
Lifetime as specified until deleted
by user or app		 until tab is closed
Secure data storage no no no

(Table taken from https://wpreset.com/localstorage-sessionstorage-cookies-detailed-comparison/)


You can find each storage type and values stored, for the current website you are on, with Dev Tools (F12 or CTRL+SHIFT+I) under the Application tab:

Browser Local Storage


localStorage and sessionStorage

There are a few methods for localStorage:

Browser Local Storage Methods


Setting and retrieving data in localStorage

All data in localStorage (as well as cookies and session storage) are stored as key-value pairs.

In order to set an item/data in localStorage, we need to call localStorage.setItem('keyName', 'value'). To retrieve data, we call localStorage.getItem('keyName').

localStorage.setItem("name", "Bob");
console.log(localStorage.getItem("name")); // Bob

Browser Local Storage Methods

Now, even if we delete localStorage.setItem('name', 'Bob'); from our JavaScript file, the data with name:Bob will remain there, in the browser, even after hitting refresh (the localStorage is persistent even when we close the browser, unlike session storage that will delete itself when the tab/browser is closed).


In order to update the value of an item, we just need to call localStorage.setItem('keyName', 'value') again on the item (key) we want to update.

To remove an item from localStorage from the app, we call in our js localStorage.removeItem("keyName").

localStorage.removeItem("name");
console.log(localStorage.getItem("name")); // null


There are also other ways of setting and removing items from localStorage (or sessionStorage), by directly assigning properties to localStorage:

localStorage.keyName = "value";
console.log(localStorage.keyName); // value

delete localStorage.keyName;
console.log(localStorage.keyName); // undefined

or:

localStorage["keyName"] = "value";
console.log(localStorage["keyName"]); // value

delete localStorage.keyName;
console.log(localStorage.keyName); // undefined


Setting and retrieving data in sessionStorage

sessionStorage works exactly the same way (with the same methods of localStorage):

sessionStorage.setItem("name", "John");
console.log(sessionStorage.getItem("name")); // John

sessionStorage.removeItem("name");
console.log(sessionStorage.getItem("name")); // null


Storing and retrieving JSON in localStorage

Here’s an example of storing and retrieving a JS object with localStorage, using JSON:

var post = {
  title: "10 Easy to make cookie recipes with fruits",
  author: "Jasmine",
};
localStorage.setItem("post", JSON.stringify(post));

// retrieve the object
var post = JSON.parse(localStorage.getItem("post"));

Browser Local Storage Methods


Another example of storing an array of objects:

var arrItems = [
  { name: "Andrew", age: 21 },
  { name: "Gabriel", age: 29 },
  { name: "Melanie", age: 25 },
];

arrItemsJSON = JSON.stringify(arrItems);
localStorage.setItem("arrItems", arrItemsJSON);

arrItemsRetrieved = JSON.parse(localStorage.getItem("arrItems"));
console.log(arrItemsRetrieved); // (3) [{…}, {…}, {…}]

Browser Local Storage Methods


Examples of using localStorage

Saving dark-mode / light-theme settings

It’s pretty convenient to save user preferences of an app, with local storage… for example, saving the light/dark mode preference:

/* style.css */
:root {
  --primary-color: #2e4d5e;
  --font-color: #101a20;
  --bg-color: #fff;
}

[data-theme="dark"] {
  --primary-color: #dcf0fd;
  --font-color: #d4efff;
  --bg-color: #010f18;
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
}
h1 {
  color: var(--primary-color);
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LocalStorage, Cookies and Session Storage</title>
    <link rel="stylesheet" href="./style.css" />
    <script defer src="./script.js"></script>
  </head>

  <body>
    <input type="checkbox" id="checkboxDarkTheme" />
    <label for="checkboxDarkTheme">Toggle Dark Theme</label>
    <h1>Hello there</h1>
    <p>What's the best thing that can happen to really make your day?</p>
  </body>
</html>

/* script.js */
const checkboxDarkTheme = document.getElementById("checkboxDarkTheme");

const currentTheme = localStorage.getItem("theme")
  ? localStorage.getItem("theme")
  : null;
if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);
  if (currentTheme === "dark") {
    checkboxDarkTheme.checked = true;
  }
}

checkboxDarkTheme.addEventListener("change", toggleDarkTheme);
function toggleDarkTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}


Aand done. The change will persist on page refresh (or on browser closing and reopening).

Simple Dark Mode with local storage

Simple Dark Mode with local storage


Storing items from ToDo List

For the simplest to do app that runs without a database, we could store all the items in local storage.

If the local storage is empty, just don’t render anything, else, we render the items (each item in a <li> tag):

/* script.js */
/* Get items array (if any) from localStorage */
let arrItems;
let arrItemsJSON = localStorage.getItem("arrItems");
if (arrItemsJSON && arrItemsJSON.length) {
  arrItems = JSON.parse(arrItemsJSON);
} else {
  arrItems = [];
}

/* Grab DOM elements from HTML */
let outputItemList = document.getElementById("outputItemList");
let formAddItem = document.getElementById("formAddItem");
let inputTextItemName = document.getElementById("inputTextItemName");

/* Display items */
window.onload = displayItemsOnLoad;
function displayItemsOnLoad() {
  arrItems.forEach((item) => {
    let li = document.createElement("li");
    li.innerText = item.name;
    outputItemList.appendChild(li);
  });
}

/* Insert item */
formAddItem.addEventListener("submit", addItem);
function addItem(event) {
  event.preventDefault();
  if (inputTextItemName.value === "") return;

  let li = document.createElement("li");
  li.innerText = inputTextItemName.value.trim();
  outputItemList.appendChild(li);

  // Push to arrItems array, clear input, and save to localStorage
  arrItems.push({ name: inputTextItemName.value.trim() });
  inputTextItemName.value = "";
  localStorage.setItem("arrItems", JSON.stringify(arrItems));
}

And the HTML:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LocalStorage, Cookies and Session Storage</title>
    <link rel="stylesheet" href="./style.css" />
    <script defer src="./script.js"></script>
  </head>

  <body>
    <form id="formAddItem">
      <label for="inputTextItemName">Add item: </label>
      <input type="text" id="inputTextItemName" />
    </form>
    <ul id="outputItemList"></ul>
  </body>
</html>


Vanilla JavaScript To Do list with Local Storage


Cookies

Cookies are a bit different to work with in JavaScript (unlike Local Storage). The only way to interact with cookies is with document.cookie object.

Creating Cookies in JS

To create a cookie with JavaScript, we would use:

document.cookie = "keyName=value";

Cookies in JavaScript


If we want to add a cookie with an expiration date. For the date, we need to write the UTC format of the day that we want it to expire (for this, we will use JavaScript dates):

document.cookie =
  "keyName=value; expires=" + new Date(2021, 07, 25).toUTCString();

// if we want the cookie to never expire, we'll just write a very distant date (ex: year 9999)
document.cookie =
  "keyName=value; expires=" + new Date(9999, 01, 01).toUTCString();

Cookies in JavaScript

We can have as many cookies as we want (as long as they don’t have similar key names).


To retrieve the cookies values, we can only view/retrieve all the informations at once (returned as a string) with document.cookie object. There’s no easy way to parse each cookie (or each value of a cookie)…

document.cookie = "name=John; expires=" + new Date(2021, 07, 25).toUTCString();
document.cookie = "age=25; expires=" + new Date(2021, 07, 25).toUTCString();
console.log(document.cookie);

Cookies in JavaScript


So it’s easier to work with Local Storage or Session Storage, where the data within them are stored in the browser, and in most cases, we don’t need the data to be sent to the server (especially with JavaScript).


Retrieving Cookies in JS by name

However, we can find some answers on StackOverflow to retrieve cookies by name in JavaScript, but it can get complicated:

/* This function won't work if multiple cookies contain same name in their key name 
(eg. "name" is in both cookies named "cookiename1" and "cookiename2") */
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(";").shift();
}

Another solution using regular expressions (regex):

function getCookie(name) {
  var match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
  if (match) return match[2];
}

document.cookie = "name=John; expires=" + new Date(2021, 07, 25).toUTCString();
document.cookie = "age=25; expires=" + new Date(2021, 07, 25).toUTCString();

console.log(getCookie("name")); // John
console.log(getCookie("age")); // 25

(Source: https://stackoverflow.com/questions/10730362/get-cookie-by-name)

Or, we can see another solution (and also more about cookies) here: https://www.w3schools.com/js/js_cookies.asp.

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}


Creating/Retrieving Cookies on server-side

However, we will usually set cookies (and get cookies values based on their key names) with server-side languages (like PHP), on server:

In PHP:

<?php
/* PHP - Set a cookie that will expire after 30 days */
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>

/* And retrieve the cookie based on its name */
<html>
<body>

<?php
if(!isset($_COOKIE[$cookie_name])) {
  echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
  echo "Cookie '" . $cookie_name . "' is set!<br>";
  echo "Value is: " . $_COOKIE[$cookie_name];
}
?>

</body>
</html>


Another example in PHP (redirect user if the “Details” form on site wasn’t completed):

<?php
if ((empty($_COOKIE['isDetailsFormCompleted']) || $_COOKIE['isDetailsFormCompleted'] != 'Yes')) {
?>
<script type="text/javascript">
    /* Pages that will cause redirect if Details form on /details-form page was not completed */
    form_pages = ['/home-insurance', '/car-insurance', '/travel-insurance'];
    for (var i = 1; i <= form_pages.length; i++) {
        if (window.location.href.indexOf(form_pages[i]) > 0 && window.location.href.indexOf('?result=success') == -1 ) {
            self.location = "/details-form";
        }
    }
</script>
<?php
}


In Django (Python):

# views.py
from django.shortcuts import render
from django.http import HttpResponse

def setcookie(request):
    response = HttpResponse("<h1>Cookie Set</h1>")
    response.set_cookie('java-tutorial', 'javatpoint.com')
    return response
def getcookie(request):
    tutorial  = request.COOKIES['java-tutorial']
    return HttpResponse("java tutorials @: "+  tutorial)

# urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('scookie',views.setcookie),
    path('gcookie',views.getcookie)
]

(Source: https://www.javatpoint.com/django-cookie and https://data-flair.training/blogs/django-cookies-handling/)

This site is open source. Improve this page.