A beginner guide to local storage, session storage and cookies in Javascript.

#javascript #webdev #beginners

Local storage and Session Storage

Local storage and session storage are both mechanisms for storing data on the web. Local storage, in particular, is designed to keep data on the client side and has no expiration date. In other words, the data remains on the user's device until it is cleared manually or by the application. It is important to note that keys and values in local storage are always strings, which means that any data that is not a string will need to be converted before being added to local storage. Overall, local storage is a reliable and efficient way to store data on the web, making it a popular choice for developers.

PROPERTIES OF LOCAL STORAGE.

localStorage.setItem()

When using the localStorage.setItem() method, it is important to keep in mind that it takes two parameters: the key and value pair. By specifying this pair, you can effectively set or update the value of the storage item that you are working with. This method is particularly useful for managing and manipulating data within your applications, and it can be easily incorporated into your code with minimal effort. Whether you are a seasoned developer or just starting out, understanding the ins and outs of this method can help you to streamline your workflows and achieve your goals with greater ease and efficiency.

localStorage.setItem("keyname", "value")

// For example: 
localStorage.setItem("name", "dennis");

console.log(localStorage.name); // output: dennis

localStorage.getItem()

The method called localStorage.getItem() is utilized to retrieve a stored value from local storage by specifying the corresponding key name. This method solely operates if the key name exists within the storage.

localStorage.getItem("keyname")

// For example: 
localStorage.setItem("myCat", "Tom");

localStorage.getItem("myCat"); // output: Tom

LocalStorage.removeItem()

The LocalStorage.removeItem() method is a useful tool for removing specific items from local storage. This is achieved by providing the method with the key name of the item to be removed. By utilizing this function, users can easily manage their local storage and keep it organized. It is important to note that the method only removes the item associated with the given key name, leaving all other items intact.

localStorage.removeItem(keyName);
localStorage.removeItem("myCat"); // undefined

localStorage.clear()

If you want to delete all the data stored in localStorage, you can accomplish this by using the method localStorage.clear(). This method will remove all the key/value pairs that are currently stored in the localStorage object. It is important to note that this action cannot be undone, so make sure you really want to clear localStorage before using this method. Additionally, keep in mind that this method only affects the current domain and cannot be used to clear data from other domains.

localStorage.clear();

CONVERTING OBJECTS TO STRING AND CONVERTING BACK TO OBJECTS.

In order to transform an object into a string, it is necessary to utilize a specific method. This method allows for the conversion of the object's data into a format that can be interpreted as a string. By doing so, the object can be easily manipulated and utilized within a program or application. It is important to have a clear understanding of this process, as it is a fundamental aspect of programming and software development.


const person = {
  name: “dennis”,
  age: 18
};

localStorage.setItem(‘user’, JSON.stringify(person));

To retrieve the original object from a string, we can make use of the JSON.parse method. Specifically, we can call JSON.parse(localStorage.getItem(user)), where "user" is the key of the item we want to retrieve from local storage. This will convert the string back into the original object that we stored in local storage.

SIMILARITIES BETWEEN LOCAL STORAGE AND SESSION STORAGE

I've noticed some similarities between local storage and session storage that I think you'll find interesting. Firstly, both of these storage options persist refresh, meaning that any data stored in them will still be available even if you refresh the page. Additionally, they can both be accessed without an internet connection, which can be a real lifesaver if you're working on a project and suddenly lose your connection. Another similarity is that they are both client-side storage APIs, which means that the data is stored on the user's device rather than a remote server. Finally, they also possess the same method, which makes it easy to work with both types of storage using the same commands. Overall, I think these similarities make local storage and session storage great options for storing data on the web.

DIFFERENCES BETWEEN LOCAL STORAGE AND SESSION STORAGE.

LOCAL STORAGE

When comparing local storage and session storage, there are some notable differences to consider. The first difference is that local storage data is permanent and will not expire, meaning it will remain stored even after a browser restart. Additionally, local storage data can be accessed across multiple tabs, making it a great option for storing data that needs to be shared across the entire website.

SESSION STORAGE

Session storage is a type of browser storage that retains data even after a page refresh. However, this data is only available within the same tab and will not survive a browser restart or be accessible from other tabs. Additionally, session storage data has a set expiration date and is automatically deleted when the tab is closed.

COOKIES

Cookies are a type of data storage mechanism that consists of small text files containing a name and value pair. These files are commonly used by websites to store user-specific information, such as login credentials, preferences, and browsing history, which can be retrieved and remembered when the user returns to the site. Cookies are primarily used for server-side authentication, allowing websites to verify a user's identity and grant access to protected content or services. Overall, cookies play a crucial role in providing a personalized and seamless browsing experience for users while ensuring the security and privacy of their data.