#17 JavaScript Code Snippets: Browser Storage APIs (localStorage, sessionStorage, Cookies)

localStorage.setItem(
 "name",
 "JavaScript"
);

console.log(
 localStorage.getItem("name")
);

getItem() returns the stored value.

localStorage.setItem(
 "age",
 25
);

console.log(
 typeof localStorage.getItem("age")
);

localStorage stores everything as strings.

localStorage.setItem(
 "city",
 "Delhi"
);

localStorage.removeItem(
 "city"
);

console.log(
 localStorage.getItem("city")
);

removeItem() deletes the key.

localStorage.setItem(
 "a",
 "1"
);

localStorage.setItem(
 "b",
 "2"
);

localStorage.clear();

console.log(
 localStorage.length
);

clear() removes all keys.

console.log(
 localStorage.getItem(
   "unknown"
 )
);

Missing keys return null.

const user = {
 name: "JS"
};

localStorage.setItem(
 "user",
 JSON.stringify(user)
);

console.log(
 localStorage.getItem("user")
);

JSON.stringify converts objects into JSON strings.

const user = {
 name: "React"
};

localStorage.setItem(
 "user",
 JSON.stringify(user)
);

const result =
 JSON.parse(
   localStorage.getItem("user")
 );

console.log(
 result.name
);

JSON.parse converts the JSON string back into an object.

const arr =
 [1,2,3];

localStorage.setItem(
 "numbers",
 JSON.stringify(arr)
);

const result =
 JSON.parse(
  localStorage.getItem(
   "numbers"
  )
 );

console.log(
 result.length
);

The parsed array contains 3 elements.

localStorage.setItem(
 "isAdmin",
 true
);

console.log(
 localStorage.getItem(
  "isAdmin"
 )
);

Booleans are stored as strings.

localStorage.setItem(
 "score",
 100
);

console.log(
 localStorage.getItem(
  "score"
 ) + 1
);

"100" + 1 performs string concatenation.

localStorage.setItem(
 "score",
 100
);

console.log(
 Number(
  localStorage.getItem(
   "score"
  )
 ) + 1
);

Number() converts the string back to a number.

localStorage.setItem(
 "user",
 JSON.stringify({
   id: 10
 })
);

const user =
 JSON.parse(
  localStorage.getItem(
   "user"
  )
 );

console.log(
 user.id
);

The stored object is parsed correctly.

localStorage.setItem(
 "a",
 "10"
);

localStorage.setItem(
 "a",
 "20"
);

console.log(
 localStorage.getItem("a")
);

Existing values are overwritten.

localStorage.setItem(
 "x",
 null
);

console.log(
 localStorage.getItem("x")
);

null is converted into the string "null".

localStorage.setItem(
 "x",
 undefined
);

console.log(
 localStorage.getItem("x")
);

undefined is converted into the string "undefined".

sessionStorage.setItem(
 "user",
 "React"
);

console.log(
 sessionStorage.getItem(
  "user"
 )
);

sessionStorage stores and retrieves values similarly to localStorage.

sessionStorage.setItem(
 "age",
 25
);

console.log(
 typeof sessionStorage.getItem(
  "age"
 )
);

Storage APIs always return strings.

sessionStorage.setItem(
 "a",
 "1"
);

sessionStorage.removeItem(
 "a"
);

console.log(
 sessionStorage.getItem("a")
);

removeItem deletes the key-value pair.

sessionStorage.setItem(
 "x",
 "10"
);

sessionStorage.setItem(
 "x",
 "20"
);

console.log(
 sessionStorage.getItem("x")
);

Existing keys are overwritten.

sessionStorage.clear();

console.log(
 sessionStorage.length
);

clear removes all stored entries.

sessionStorage.clear();

sessionStorage.setItem(
 "a",
 "1"
);

sessionStorage.setItem(
 "b",
 "2"
);

console.log(
 sessionStorage.length
);

length returns the number of stored keys.

sessionStorage.clear();

sessionStorage.setItem(
 "name",
 "JS"
);

console.log(
 sessionStorage.key(0)
);

key(index) returns the key name.

sessionStorage.setItem(
 "active",
 false
);

console.log(
 sessionStorage.getItem(
  "active"
 )
);

Booleans become strings when stored.

sessionStorage.setItem(
 "price",
 99
);

console.log(
 sessionStorage.getItem(
  "price"
 ) + 1
);

String concatenation occurs.

sessionStorage.setItem(
 "price",
 99
);

console.log(
 Number(
  sessionStorage.getItem(
   "price"
  )
 ) + 1
);

Number converts the string into a number.

sessionStorage.setItem(
 "data",
 null
);

console.log(
 sessionStorage.getItem(
  "data"
 )
);

null is stored as a string.

sessionStorage.setItem(
 "data",
 undefined
);

console.log(
 sessionStorage.getItem(
  "data"
 )
);

undefined becomes a string when stored.

localStorage.setItem(
 "theme",
 "dark"
);

sessionStorage.setItem(
 "theme",
 "light"
);

console.log(
 sessionStorage.getItem(
  "theme"
 )
);

localStorage and sessionStorage are separate storage areas.

localStorage.setItem(
 "theme",
 "dark"
);

sessionStorage.setItem(
 "theme",
 "light"
);

console.log(
 localStorage.getItem(
  "theme"
 )
);

The two storage mechanisms do not affect each other.

sessionStorage.clear();

console.log(
 sessionStorage.key(0)
);

key(index) returns null when no key exists at that index.

document.cookie =
 "username=JS";

console.log(
 document.cookie
);

document.cookie returns all available cookies as a string.

document.cookie =
 "theme=dark";

document.cookie =
 "lang=en";

console.log(
 document.cookie.includes("lang=en")
);

Multiple cookies can coexist.

document.cookie =
 "user=React";

console.log(
 document.cookie.includes("user")
);

Cookie strings contain key=value pairs.

document.cookie =
 "role=admin";

const cookie =
 document.cookie;

console.log(
 cookie.split("=")[1]
);

The cookie value is extracted after '='.

document.cookie =
 "theme=dark";

console.log(
 typeof document.cookie
);

document.cookie always returns a string.

document.cookie =
 "count=10";

const value =
 document.cookie
  .split("=")[1];

console.log(
 Number(value) + 5
);

Number converts the cookie value into a number.

document.cookie =
 "name=JS";

console.log(
 document.cookie.includes("JS")
);

The cookie string contains the stored value.

localStorage.setItem(
 "theme",
 "dark"
);

console.log(
 localStorage.length
);

length returns total stored keys.

localStorage.clear();

localStorage.setItem(
 "a",
 "1"
);

console.log(
 localStorage.key(0)
);

key(0) returns the first key name.

localStorage.setItem(
 "flag",
 "true"
);

console.log(
 JSON.parse(
  localStorage.getItem(
   "flag"
  )
 )
);

JSON.parse("true") returns boolean true.

localStorage.setItem(
 "flag",
 "false"
);

console.log(
 JSON.parse(
  localStorage.getItem(
   "flag"
  )
 )
);

JSON.parse converts the string to a boolean.

localStorage.setItem(
 "arr",
 "[1,2,3]"
);

const result =
 JSON.parse(
  localStorage.getItem(
   "arr"
  )
 );

console.log(
 result[1]
);

The parsed array index 1 contains 2.

localStorage.setItem(
 "user",
 '{"name":"JS"}'
);

const user =
 JSON.parse(
  localStorage.getItem(
   "user"
  )
 );

console.log(
 user.name
);

JSON.parse recreates the original object.

localStorage.clear();

console.log(
 localStorage.getItem(
  "missing"
 ) === null
);

Missing keys return null.

localStorage.setItem(
 "count",
 "10"
);

const value =
 parseInt(
  localStorage.getItem(
   "count"
  )
 );

console.log(
 value + 1
);

parseInt converts the stored string into a number.