No announcement
 

Using Local Storage and Working with Cookies

Using Local Storage

Local Storage is a web storage solution provided by browsers that allows you to store key-value pairs locally on a user's device. It's a useful way to persist data between sessions and provide a seamless user experience.

Example:

local_storage.html

<!DOCTYPE html>
<html>
<head>
  <title>Using Local Storage Example</title>
</head>
<body>

<h2>Using Local Storage:</h2>
<button id="saveButton">Save Data</button>
<button id="loadButton">Load Data</button>
<p id="output"></p>

<script>
document.getElementById("saveButton").addEventListener("click", function() {
  localStorage.setItem("username", "Alice");
  localStorage.setItem("age", "30");
  document.getElementById("output").textContent = "Data saved to Local Storage.";
});

document.getElementById("loadButton").addEventListener("click", function() {
  let username = localStorage.getItem("username");
  let age = localStorage.getItem("age");
  document.getElementById("output").textContent = `Username: ${username}, Age: ${age}`;
});
</script>

</body>
</html>

Output
When you click the "Save Data" button, the output will display: "Data saved to Local Storage." When you click the "Load Data" button after saving data, the output will display: "Username: Alice, Age: 30."

Explanation:

  • In the HTML code, we have two buttons labeled "Save Data" and "Load Data" There's also a <p> element with the id "output" to display messages.
  • In the JavaScript code, we add event listeners to the "Save Data" and "Load Data" buttons.
  • When the "Save Data" button is clicked, we use localStorage.setItem() to save the values "Alice" and "30" under the keys "username" and "age".
  • When the "Load Data" button is clicked, we retrieve the saved values using localStorage.getItem() and display them in the <p> element.

Working with Cookies

Cookies are small pieces of data stored in the user's browser that can be used for various purposes such as tracking, authentication, and remembering user preferences.

Example:

cookies.html

<!DOCTYPE html>
<html>
<head>
  <title>Working with Cookies Example</title>
</head>
<body>

<h2>Working with Cookies:</h2>
<button id="setCookieButton">Set Cookie</button>
<button id="getCookieButton">Get Cookie</button>
<p id="output"></p>

<script>
document.getElementById("setCookieButton").addEventListener("click", function() {
  document.cookie = "username=Alice; expires=Thu, 01 Jan 2023 00:00:00 UTC; path=/";
  document.cookie = "age=30; expires=Thu, 01 Jan 2023 00:00:00 UTC; path=/";
  document.getElementById("output").textContent = "Cookies set.";
});

document.getElementById("getCookieButton").addEventListener("click", function() {
  let cookies = document.cookie.split("; ");
  let username, age;
  
  for (let cookie of cookies) {
    let [name, value] = cookie.split("=");
    if (name === "username") {
      username = value;
    } else if (name === "age") {
      age = value;
    }
  }
  
  document.getElementById("output").textContent = `Username: ${username}, Age: ${age}`;
});
</script>

</body>
</html>

Output
When you click the "Set Cookie" button, the output will display: "Cookies set." When you click the "Get Cookie" button after setting cookies, the output will display: "Username: Alice, Age: 30."

Explanation:

  • In the HTML code, we have two buttons labeled "Set Cookie" and "Get Cookie". There's also a <p> element with the id "output" to display messages.
  • In the JavaScript code, we add event listeners to the "Set Cookie" and "Get Cookie" buttons.
  • When the "Set Cookie" button is clicked, we use document.cookie to set two cookies: "username" with the value "Alice" and "age" with the value "30". We also specify the expiration date and path.
  • When the "Get Cookie" button is clicked, we retrieve the cookie values using document.cookie. We split the cookies into an array and loop through them to extract the username and age values.

Both Local Storage and Cookies are useful mechanisms for storing data on the client-side. Local Storage is generally recommended for storing larger amounts of data, while Cookies are often used for smaller pieces of data or for specific purposes like authentication tokens.