Search for a command to run...
Another way to save data in our web applications
No comments yet. Be the first to comment.
In my previous article about what CRUD is, I also discussed that a part of any application is a database. Today, a database is almost necessary for every application, because it allows us to store different data. Databases can be relational or non-re...
Hey 👋, I'm back with a new blog post after a long break! This past week, I’ve been diving deep into integrating push notifications into a mobile app. If you've ever wondered how they work and why they’re so effective, this post is for you! What Are ...
I'm back again with a new blog post. The idea for this post came very spontaneously. I'm currently investing a lot of time in my new development project, and I came up with how to further secure the application. As a solution to this issue, quite a f...
Node.js is an engine that allows us to run JavaScript outside the browser. Many applications today are powered by Node.js, offering numerous advantages and a few drawbacks. However, my intention today is not to introduce Node.js or JavaScript. Today,...
I have said many times that computer science is a huge field in which everyone can find themselves. Being a computer science student has its advantages and benefits, and one such advantage is what GitHub offers with its GitHub for Education program a...
Open Graph is an Internet protocol created by Facebook to standardize the display of metadata on social networks. What advantages does it bring? Open Graph brings advantages when displaying a website on social networks. Open Graph makes our posts mor...
Web browsers today have a huge range of features, and more and more will get them.
We all know about cookies in our browsers, but browsers today have a special feature called the Web Storage API that allows us to temporarily or permanently store values.
The Web Storage API is a browser functionality that can store data in key-value format. The purpose of this browser API is to make the site more intuitive than cookies.
A big advantage of the Web Storage API is that values are stored even if the user closes the browser.
But where is the data stored? Data stored using the Web Storage API is stored in an SQLite file in the user's local folder.
The data stored in localStorage and sessionStorage can be accessed anywhere in the application with the JavaScript code.
localStorage and sessionStorageThe Web Storage API has two data storage functions, localStorage and sessionStorage, the main difference between the two being that localStorage remains stored in the browser until it is deleted (it can also be permanent). However, SessionStorage is only stored until the user closes the browser. SessionStorage is a useful thing if you want to save some value in a browser instead of a cookie.
In this article, I will focus on localStorage, but almost all functions and features are the same as sessionStorage.
LocalStorageLocalStorage, as I mentioned earlier, stores data in key-value format.
localStorage knows five main functions that can be used anywhere within the application.
These features are:
setItem(), the function allows us to store values in localStorage,getItem(), allows us to retrieve a specific value from localStorage,removeItem(), the function allows us to remove key with value from localStroage,clear(), the function clears all localStorage,key().setItem()
With this feature, we can store the value in our localStorage.
Using the feature is very simple. The function accepts two parameters, the first is the key and the second is the value of this key.
window.localStorage ("key", "value");
In localStorage we can store different data types such as string, int, bool, object…
The JSON.stringify function allows us to save a JSON object to localStorage.
const user = {
id: 12345,
name: "John Doe",
email: "john.doe@example.com",
}
window.localStorage.setItem('user', JSON.stringify(user));
getItem()
With this function, we can get the value stored in localStorage. The function accepts one parameter, which is the value we want to get from memory.
window.localStorage.getItem ('user');
The function will return a string with the value:
"{" id ": 12345," name ":" John Doe "," email ":" john.doe@example.com "} '
Since such a string cannot be used in our application, it must be returned to the JSON object. This is done with the JSON.parse() function
JSON.parse(window.localStorage.getItem('user'));
removeItem()
The removeItem() function is used to remove only one element from localStorage.
The function accepts only one parameter and that is the name of the key we want to remove from localStorage. Removes the item if the key exists.
window.localStorage.removeItem ('user');
clear()
With the clear() function, we remove all elements in localStorage.
The function does not accept any parameters.
window.localStorage.clear();
localStorageEverything has its drawbacks and so does localStorage, one of the biggest is limiting the amount of data we can store to 5 MB.
Another drawback is that localStorage is synchronous, which means that items can be accessed gradually.
I hope I have introduced you to how we can store data in a browser in a different way.
Let's connect: