Search for a command to run...
Hello! I'm Yuvraj. I'm a Computer Science Student. I love to learn, create, and explore new things. I am currently doing a Bachelor of Computer Science from the University of Delhi.
Is it possible if I get someone's auth token from their local storage and add it to my browser's local storage? Will that token work for me? For example, If I store the login token for each user in the local storage but let's say someone got access to that token, can they then login using that token from their own browser?
Basically, how does the browser ensures the security of data?
Yes, once a token is stolen the account would be compromised. That's why sensitive information must never be stored in local storage as browser doesn't ensure any security. Any third party js code used on the website can access local storage thus increasing the chances of token theft.
Will also update the article to include this point. Thanks for pointing it out. 🙌🙌
Also https://developer.okta.com/blog/2018/06/20/what-happens-if-your-jwt-is-stolen this is a brilliant article about the same. Worth a read.
Yuvraj Singh Jadon Thanks for the answer.
Now that we understand the basics of Kafka producers and consumers, let's build a more realistic example that shows how Kafka can be used in a real-world scenario. We'll create a simple order processing system with these components: Order Service: C...
Now that we've created a producer that sends messages to Kafka, let's create a consumer that reads those messages. A consumer is an application that subscribes to Kafka topics and processes the messages. Setting Up the Project First, let's set up our...
Now that we understand the basic concepts of Kafka, let's create our first producer. A producer is an application that sends messages to Kafka topics. Setting Up the Project First, let's set up our Node.js project: Create a package.json file in the ...
Kafka Basic Concepts Now that we have Kafka running, let's understand the key concepts that make Kafka work. I'll explain these in simple terms without jargon. The Big Picture Kafka is a system that lets different parts of your application talk to ea...
Chapter 2
In this article, we will learn how to use Local Storage to save data persistently in the browser using Local Storage.
You will just need familiarity with basic JavaScript and HTML.
The best way to go through the article is to open your code editor and code along with me.
So, let's start!
LocalStorage is a property of windows object, it allows us to store key-value pairs in a web browser.
The localStorage's data has no expiration date.
The data will not be deleted when the browser is closed and will be available whenever you open the same web page.
Each Protocol-Domain combination will have different local storage, which means, [http://example.com](http://example.com) and [https://example.com](https://example.com) will not share their local storage property.
LocalStorage is generally used to save a user's preferences, theme settings, login information, auth tokens. You can store any kind of information you want.
Let's start by creating a simple web page with a button and a heading 💻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage</title>
</head>
<body>
<button id="count-btn">Count</button>
<h1 id="clicks-count">0</h1>
<script src="main.js"></script>
</body>
</html>
We have given both button and h1 tags an id to access them in the JavaScript **file.
This is how our web page looks, we want to increase the number by 1 each time the Count button is pressed.
Let's create a JavaScript file main.js and the following code **to implement this behavior:
document.querySelector('#count-btn').addEventListener('click', (e) => {
const countElement = document.querySelector('#clicks-count');
const count = Number(countElement.innerText) + 1;
document.querySelector('#count-btn').addEventListener('click', (e) => {
const countElement = document.querySelector('#clicks-count');
const count = Number(countElement.innerText) + 1;
localStorage.setItem('count', count);
countElement.innerText = count;
});
countElement.innerText = count;
});
We added an event listener for the click action on the button, whenever the button is clicked we access the value of h1, increment it by 1, and then update the h1 again.
Now, the page is behaving the way we want:
But there's a problem! Try refreshing the page and the count resets to 0.
Now we will use local storage to save this count so that we start from the same number we reached before refreshing or closing the browser.
Setting count in LocalStorage
Use the localStorage.setItem(key, value); in the event listener we created before:
document.querySelector('#count-btn').addEventListener('click', (e) => {
const countElement = document.querySelector('#clicks-count');
const count = Number(countElement.innerText) + 1;
localStorage.setItem('count', count);
countElement.innerText = count;
});
This will set a key count in the local storage and update it each time we press the button.
You can check it by opening the inspect element (Control+Shift+I on windows, Command + Shift + I on mac) and going into the application tab, and selecting Local Storage from the left menu:
Try refreshing the page again, it still starts from 0, that's because we have saved the value but we also need to set the previous value of count to the initial value when the page loads:
We will use the localStorage.getItem(key); to access a value of a key from localStorage.
Edit the main.js to use getItem function:
document.querySelector('#clicks-count').innerText = localStorage.getItem('count') ?? 0;
document.querySelector('#count-btn').addEventListener('click', (e) => {
const countElement = document.querySelector('#clicks-count');
const count = Number(countElement.innerText) + 1;
localStorage.setItem('count', count);
countElement.innerText = count;
});
The first line checks if a key 'count' exists in the local storage, if true it sets the heading to that number otherwise it set it to 0.
You could also have used an if condition for this but here we are using the more succinct ?? operator.
?? - The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.
And with this, we are done with our web page. Try refreshing or closing the browser and the count will still start from the last value.
localStorage.setItem(key, value);
Adds a key and value pair to local storage.
**const cat = localStorage.getItem(key);**
Gets a value for a key from the local storage.
**localStorage.removeItem(key);**
Deletes a key-value pair from the local storage.
localStorage.clear();
Deletes all key-value pairs from the local storage.
Now that you know how to use localStorage, try using it in your next project.
Here are a few project ideas for beginners to try out localStorage:
Note: Just because you can store any information in local storage doesn't mean you should. Never store sensitive data in local storage as any third party js code would be able to access it, increasing the security risk. (Thanks to @apoorvtyagi for questioning about the security of local storage)
I hope you found this article helpful! Thanks for reading.