How to save to local storage jquery code example

In this tutorial, we’ll show you how lớn use the localStorage mechanism và Window.localStorage property and reviews the basics of website storage in JavaScript.

Bạn đang xem: How to save to local storage jquery code example

We’ll cover the following in detail:

How does localStorage work?

What is the web Storage API?

The web Storage API is a phối of mechanisms that enable browsers to store key-value pairs. It is designed to lớn be much more intuitive than using cookies.

The key-value pairs represent storage objects, which are similar khổng lồ objects except they remain intact during page loads, and are always strings. You can access these values like an object or using the getItem() method (more on that later).

What is the difference between sessionStorage & localStorage?

The website Storage API consists of two mechanisms: sessionStorage & localStorage. Both sessionStorage & localStorage maintain a separate storage area for each available origin for the duration of the page session.

The main difference between sessionStorage & localStorage is that sessionStorage only maintains a storage area while the browser is xuất hiện (including when the page reloads or restores) while localStorage continues to lớn store data after the browser is closed. In other words, whereas data stored in sessionStorage is cleared when the page is closed, data stored in localStorage does not expire.

In this tutorial, we’ll focus on how to use localStorage in JavaScript.

What is localStorage in JavaScript?

localStorage is a property that allows JavaScript sites and apps khổng lồ save key-value pairs in a website browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

For a visual refresher on how to lớn use localStorage in JavaScript, check out the đoạn clip tutorial below:


Learn more →

Where is localStorage stored?

In Google Chrome, web storage data is saved in an SQLite tệp tin in a subfolder in the user’s profile. The subfolder is located at AppDataLocalGoogleChromeUser DataDefaultLocal Storage on Windows machines & ~/Library/Application Support/Google/Chrome/Default/Local Storage on macOS

Firefox saves storage objects in an SQLite tệp tin called webappsstore.sqlite, which is also located in the user’s profile folder.

What is Window.localStorage?

The localStorage mechanism is available via the Window.localStorage property. Window.localStorage is part of the Window interface in JavaScript, which represents a window containing a DOM document.

The Window interface features a wide range of functions, constructors, objects, and namespaces. Window.localStorage is a read-only property that returns a reference to the local storage object used khổng lồ store data that is only accessible to the origin that created it.

How does localStorage work?

To use localStorage in your web applications, there are five methods to lớn choose from:

setItem(): add key và value lớn localStoragegetItem(): This is how you get items from localStorageremoveItem(): Remove an công trình by key from localStorageclear(): Clear all localStoragekey(): Passed a number to retrieve the key of a localStorage

setItem(): How to store values in localStorage

Just as the name implies, this method allows you lớn store values in the localStorage object.

It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached lớn it.

More great articles from

window.localStorage.setItem("name", "Obaseki Nosa");Where name is the key và Obaseki Nosa is the value. Also note that localStorage can only store strings.

To store arrays or objects, you would have to convert them lớn strings.

Xem thêm: Looking For A Data Mapper Orm : Php Datamapper — Spot Orm, Orm Patterns: The Trade

To vày this, we use the JSON.stringify() method before passing to setItem().

const person = name: "Obaseki Nosa", location: "Lagos",window.localStorage.setItem("user", JSON.stringify(person));

getItem(): How to lớn get items from localStorage

To get items from localStorage, use the getItem() method. GetItem() allows you to access the data stored in the browser’s localStorage object.

getItem() accepts only one parameter, which is the key, và returns the value as a string.

To retrieve a user key:

window.localStorage.getItem("user");This returns a string with value as:

““name”:”Obaseki Nosa”,”location”:”Lagos””To use this value, you would have to convert it back khổng lồ an object.

To bởi vì this, we make use of the JSON.parse() method, which converts a JSON string into a JavaScript object.


removeItem(): How to lớn delete localStorage sessions

To delete local storage sessions, use the removeItem() method.

When passed a key name, the removeItem() method removes that key from the storage if it exists. If there is no nhà cửa associated with the given key, this method will vì nothing.


clear(): How lớn delete all items in localStorage

Use the clear() method to delete all items in localStorage.

This method, when invoked, clears the entire storage of all records for that domain. It does not receive any parameters.


key(): How to lớn get the name of a key in localStorage

The key() method comes in handy in situations where you need lớn loop through keys & allows you lớn pass a number or index to localStorage lớn retrieve the name of the key.

var KeyName = window.localStorage.key(index);

localStorage browser support

localStorage as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To lớn be sure the browser supports localStorage, you can kiểm tra using the following snippet:

if (typeof(Storage) !== "undefined") // Code for localStorage else // No web storage Support.

localStorage limitations

As easy as it is to use localStorage, it is also easy to lớn misuse it. The following are limitations, and also ways to lớn NOT use localStorage:

Do not store sensitive user information in localStorageIt is not a substitute for a server based database as information is only stored on the browserlocalStorage is limited to lớn 5MB across all major browserslocalStorage is quite insecure as it has no size of data protection & can be accessed by any code on your website pagelocalStorage is synchronous, meaning each operation called would only execute one after the other

With these, we have been armed with the nguồn of localStorage in our website applications. Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors the easier it is lớn fix them. allows you khổng lồ understand these errors in new & unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends khổng lồ give you the ability to find out exactly what the user did that led khổng lồ an error.

* records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!