DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Save Data To Offline Storage With Localforage
Vishnu Damwala
Vishnu Damwala

Posted on • Originally published at meshworld.in

Save Data To Offline Storage With Localforage

The localForage is an open-source JavaScript library that refines the experience of saving data to web browser databases like localStorage, IndexedFB or WebSQL API.

It supports the majority of all types of browser databases.

It is absolutely asynchronous that simply uses browser databases and improves the universal offline experience of the web app.

In this tutorial, we'll see how to save data to browsers in a much easier way with localforage setItem() method.

Localforage setItem() method

  • With localforage setItem(), developers are allowed to store multiple types of data not just strings.
  • It automatically manages and loads the best web browser driver(IndexedDB, WebSQL, and localStorage drivers).
  • It also supports to store blob and arbitrary type of data, so that we can store images, files, etc.
  • It also supports ES6 Promises.

Syntax

setItem(key, value, successCallback);

Types of supported JavaScript objects

  • Array
  • ArrayBuffer
  • Blob
  • Float32Array
  • Float64Array
  • Int8Array
  • Int16Array
  • Int32Array
  • Number
  • Object
  • Uint8Array
  • Uint8ClampedArray
  • Uint16Array
  • Uint32Array
  • String

Example

const user = {
  firstName: "Sunidhi",
  lastName: "Chauhan",
  profession: "Singer ๐ŸŽค",
};

localforage
  .setItem("userDetails", user)
  .then((value) => {
    console.log("๐Ÿ‘ฉโ€๐ŸŽค " + value.firstName + " " + value.lastName);
  })
  .catch((error) => {
    console.error(error);
  });

Output in console

๐Ÿ‘ฉโ€๐ŸŽค Sunidhi Chauhan

Alt Text

Read the complete post on our site MeshWorld โ€Š- โ€ŠSave Data To Offline Storage With Localforage

Read others post on our site MeshWorld

Hope you like this
Happy ๐Ÿ˜„ coding
With โค๏ธ from India ๐Ÿ‡ฎ๐Ÿ‡ณ

Top comments (0)

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!