Learn LocalStorage in One Article

Introduction

LocalStorage is a browser local storage API. See: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

Can the server access it?

|—Cookie: Yes, the server can access it. Cookies are sent with every request by default.

|—LocalStorage: No, the server cannot access it.

Storage size:

|—Cookie: 4096 bytes

|—LocalStorage: 5 MB

Expiration:

|—Cookie: Supports setting an expiration time.

|—LocalStorage: Does not support setting an expiration time by default.

Using LocalStorage

LocalStorage is straightforward to use:

// set
localStorage.setItem('myCat', 'Tom');

// get
const cat = localStorage.getItem('myCat');

// remove
localStorage.removeItem('myCat');

// clear
localStorage.clear();

Storing Numbers in LocalStorage

Note that LocalStorage always stores values as strings, so be careful with number operations:

// set
localStorage.setItem('number', 1);

// get — this returns: '1'
localStorage.getItem('number');

Storing Objects in LocalStorage

Since LocalStorage always stores values as strings, storing an object directly gives unexpected results:

// set
localStorage.setItem('obj', {});

// get — this returns: '[object Object]'
localStorage.getItem('obj');

For scenarios where you need to store objects, do this instead:

// set
localStorage.setItem('obj', JSON.stringify({}));

// get — this returns {}
JSON.parse(localStorage.getItem('obj'));

By using JSON’s stringify and parse methods, you can store and retrieve objects properly.

Viewing LocalStorage

After setting LocalStorage values, you can view them in Chrome DevTools:

Application - Storage - Local Storage

LocalStorage Storage Limit

As mentioned above, LocalStorage can store up to 5 MB of content. Is this limit accurate? How can we verify it?

You can write a simple test locally. For example, take a 20 KB file and write it to LocalStorage about 300 times to see if it succeeds.

Here’s the code — for the value, you can use the content of a minified JS file like axios:

const value = `axios.js content`;

const count = 300;
for (let i = 0; i < count; i++) {
  localStorage.setItem(`key${i}`, value);
}

It throws an error at the 266th write:

A rough calculation: (20K * 266) / 1024 = 5.19 MB

This confirms that the LocalStorage size limit is approximately 5 MB.

Setting Expiration for LocalStorage

As mentioned, cookies support expiration times, but LocalStorage does not.

If you need to set an expiration time for LocalStorage, how can you do it?

You can create custom get and set methods that manually add expiration logic:

/**
 * set item
 *  name
 *  value
 *  expires, ms
 */
function setItem(name, value, expires) {
  if (!localStorage) {
    console.log('unsupport localStorage');
    return;
  }

  const obj = {};
  obj.value = value;
  if (expires) obj.expires = Date.now() + expires;

  localStorage.setItem(name, JSON.stringify(obj));
}

/**
 * get item
 *  name
 */
function getItem(name) {
  if (!localStorage) {
    console.log('unsupport localStorage');
    return;
  }

  const objStr = localStorage.getItem(name);
  let obj;
  try {
    obj = JSON.parse(objStr);
  } catch (e) {
    console.log('json parse error:');
    console.log(e);
  }
  if (!obj) return;

  if (obj.expires && obj.expires < Date.now()) {
    localStorage.removeItem(name);
    return;
  }

  return obj.value;
}

qiao.ls.js

I’ve packaged this into an npm module. Feel free to use it: https://code.insistime.com/#/qiao.ls.js

|— Simplified set operation

// q
import { ls } from 'qiao.ls.js';

// set
ls('name', 'value');

|— Simplified get operation

// q
import { ls } from 'qiao.ls.js';

// get
console.log(ls('name')); // value

|— Simplified delete operation

// delete
ls('name', null);
console.log(ls('name')); // undefined

|— Supports storing and retrieving objects directly

// set obj
ls('obj', {});

// get obj
ls('obj'); // {}

|— Supports setting expiration time

// set 10s expires
ls('name', 'value', 10 * 1000);

|— Supports CommonJS syntax

// --cjs
// q
const q = require('qiao.ls.js');

// set
q.ls('name', 'value');

// set 10s expires
q.ls('name', 'value', 10 * 1000);

// get
console.log(q.ls('name')); // value

// delete
q.ls('name', null);
console.log(q.ls('name')); // undefined

|— Supports ES module syntax

// --mjs
// q
import { ls } from 'qiao.ls.js';

// set
ls('name', 'value');

// set 10s expires
ls('name', 'value', 10 * 1000);

// get
console.log(ls('name')); // value

// delete
ls('name', null);
console.log(ls('name')); // undefined

Summary

Introduction to LocalStorage usage
Comparison between LocalStorage and cookies
Storing number types in LocalStorage
Storing object types in LocalStorage
Viewing LocalStorage in Chrome DevTools
Verifying the 5 MB storage limit
Setting expiration times for LocalStorage
LocalStorage utility and enhancements: https://code.insistime.com/#/qiao.ls.js