Basic JavaScript

Home / Topic / Basic JavaScript / Browser Storage

Browser Storage

Browser storage is an important functionality for creating more interactive and efficient web applications. It allows us to store data on the client side, which means we can maintain information between sessions, reduce server requests, and improve user experience. In this chapter, we will explore the different storage mechanisms available in JavaScript, including cookies, Local Storage, Session Storage, and IndexedDB.

Cookies

Cookies are small pieces of data that a server can send to the browser, and the browser stores to send them back in subsequent requests. Cookies are commonly used for session tracking, storing user information, and authentication.

Creating a Cookie

To create a cookie in JavaScript, you can use document.cookie. Cookies have a key-value format, and you can specify an expiration date and other options.

javascript

"Here we create a cookie named username with the value JohnDoe. We set an expiration date for December 31, 2024, and make the cookie accessible on all paths of the site using the path parameter."

Reading Cookies

You can access all cookies using document.cookie. However, this method returns all cookies as a single string, so you will need to parse it to get individual values.

javascript

"Here we use document.cookie to get all cookies and split them into an array using split. Then we iterate over each cookie and print its value to the console."

Deleting Cookies

To delete a cookie, you can set its expiration date in the past.

javascript

"Here we delete the cookie named username by setting its expiration date in the past, causing the browser to remove it."

Local Storage

Local Storage allows data to be stored persistently in the browser without expiring. Data stored in Local Storage persists even after the user closes the tab or browser.

Storing Data in Local Storage

You can store data in Local Storage using the setItem method.

javascript

"In this example, we use localStorage.setItem to store the value JohnDoe under the key username in the browser's local storage."

Reading Data from Local Storage

To read data from Local Storage, use getItem.

javascript

"Here we use localStorage.getItem to retrieve the stored value under the key username and print it to the console."

Removing Data from Local Storage

You can remove a specific item from Local Storage using removeItem.

javascript

"In this example, we remove the item username from local storage using localStorage.removeItem."

Clearing All Local Storage

If you need to remove all data stored in Local Storage, you can use clear.

javascript

"Here we use localStorage.clear to remove all data stored in Local Storage."

Session Storage

Session Storage is similar to Local Storage, but the data it stores persists only during the browser session. Once the user closes the tab or browser, the data is deleted.

Storing Data in Session Storage

Like Local Storage, you can store data in Session Storage using setItem.

javascript

"Here we store a sessionID value with the value 12345 in Session Storage using sessionStorage.setItem."

Reading and Removing Data from Session Storage

The methods for reading and removing data in Session Storage are identical to those in Local Storage.

javascript

"We use sessionStorage.getItem to read the value of sessionID and sessionStorage.removeItem to remove that value from Session Storage."

IndexedDB

IndexedDB is an object-oriented database that allows storing large amounts of structured data, including files and blobs. Unlike Local Storage and Session Storage, IndexedDB is more suitable for complex applications that need to store large data or perform advanced queries.

Opening a Database

To use IndexedDB, you first need to open a database using indexedDB.open. This process is asynchronous and requires handling success and error events.

javascript

"In this example, we open a database called MyDatabase using indexedDB.open. We define onsuccess and onerror event handlers to manage the operation's results."

Storing Data in IndexedDB

To store data in IndexedDB, you must create a transaction and use an object store.

javascript

"Here we create a transaction in the database and add an object to the users store. If the operation is successful, we print a message to the console. If an error occurs, we handle it with onerror."

IndexedDB is very powerful, but it is also more complex than Local Storage and Session Storage, so it is mainly used for applications that need more advanced data storage.

Conclusion

Browser storage is an essential tool for creating interactive and efficient web applications. In this chapter, we have explored different client-side storage methods, including cookies, Local Storage, Session Storage, and IndexedDB.

Back to previous chapter

Mark as read and continue

Ask me anything