yashksaini-coder · yashksaini-coder · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
diff --git a/Day20/Activity-4/index.html b/Day20/Activity-4/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SessionStorage Example</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+        }
+
+        h1, h2 {
+            color: #333;
+        }
+
+        form {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+        }
+
+        input {
+            width: calc(100% - 20px);
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        button {
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            width: 100%;
+            font-size: 16px;
+            margin-bottom: 10px;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        #savedData {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+        }
+
+        #deleteData {
+            background-color: #ff0000;
+            color: #fff;
+            border: none;
+            padding: 10px 15px 20px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            width: 300px;
+            font-size: 16px;
+        }
+    </style>
+</head>
+<body>
+    <h1>User Information Form</h1>
+    <form id="userForm">
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required>
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required>
+        <button type="submit">Save Data</button>
+    </form>
+
+    <h2>Saved User Data</h2>
+    <div id="savedData"></div>
+    <br>
+    <button id="deleteData">Delete Data</button>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Day20/Activity-4/script.js b/Day20/Activity-4/script.js
@@ -0,0 +1,38 @@
+// Task 7: Save data to sessionStorage on form submission
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('userForm');
+    const savedData = document.getElementById('savedData');
+    const deleteButton = document.getElementById('deleteData');
+
+    // Retrieve and display data on page load
+    const savedName = sessionStorage.getItem('name');
+    const savedEmail = sessionStorage.getItem('email');
+
+    if (savedName && savedEmail) {
+        savedData.innerHTML = `<p>Name: ${savedName}</p><p>Email: ${savedEmail}</p>`;
+    } else {
+        savedData.innerHTML = '<p>No data saved yet.</p>';
+    }
+
+    // Save data to sessionStorage on form submission
+    form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        const name = form.name.value;
+        const email = form.email.value;
+
+        sessionStorage.setItem('name', name);
+        sessionStorage.setItem('email', email);
+
+        savedData.innerHTML = `<p>Name: ${name}</p><p>Email: ${email}</p>`;
+    });
+
+    // Task 8: Delete data from sessionStorage on button click
+    deleteButton.addEventListener('click', () => {
+        console.log('Before removal:', JSON.stringify(sessionStorage, null, 2));
+        sessionStorage.removeItem('name');
+        sessionStorage.removeItem('email');
+        console.log('After removal:', JSON.stringify(sessionStorage, null, 2));
+
+        savedData.innerHTML = '<p>Data deleted.</p>';
+    });
+});
diff --git a/Day20/Task.md b/Day20/Task.md
@@ -6,28 +6,28 @@ Welcome to Day 20! Today, we're diving into the world of web storage with **Loca
 
 ### Activity 1: Understanding LocalStorage 📚
 
-- [ ] **Task 1:** Write a script to save a string value to `localStorage` and retrieve it. Log the retrieved value.
-- [ ] **Task 2:** Write a script to save an object to `localStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
+- [X] **Task 1:** Write a script to save a string value to `localStorage` and retrieve it. Log the retrieved value.
+- [X] **Task 2:** Write a script to save an object to `localStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
 
 ### Activity 2: Using LocalStorage 🛠️
 
-- [ ] **Task 3:** Create a simple form that saves user input (e.g., name and email) to `localStorage` when submitted. Retrieve and display the saved data on page load.
-- [ ] **Task 4:** Write a script to remove an item from `localStorage`. Log the `localStorage` content before and after removal.
+- [X] **Task 3:** Create a simple form that saves user input (e.g., name and email) to `localStorage` when submitted. Retrieve and display the saved data on page load.
+- [X] **Task 4:** Write a script to remove an item from `localStorage`. Log the `localStorage` content before and after removal.
 
 ### Activity 3: Understanding SessionStorage 🧠
 
-- [ ] **Task 5:** Write a script to save a string value to `sessionStorage` and retrieve it. Log the retrieved value.
-- [ ] **Task 6:** Write a script to save an object to `sessionStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
+- [X] **Task 5:** Write a script to save a string value to `sessionStorage` and retrieve it. Log the retrieved value.
+- [X] **Task 6:** Write a script to save an object to `sessionStorage` by converting it to a JSON string. Retrieve and parse the object, then log it.
 
 ### Activity 4: Using SessionStorage 🔄
 
-- [ ] **Task 7:** Create a simple form that saves user input (e.g., name and email) to `sessionStorage` when submitted. Retrieve and display the saved data on page load.
-- [ ] **Task 8:** Write a script to remove an item from `sessionStorage`. Log the `sessionStorage` content before and after removal.
+- [X] **Task 7:** Create a simple form that saves user input (e.g., name and email) to `sessionStorage` when submitted. Retrieve and display the saved data on page load.
+- [X] **Task 8:** Write a script to remove an item from `sessionStorage`. Log the `sessionStorage` content before and after removal.
 
 ### Activity 5: Comparing LocalStorage and SessionStorage ⚖️
 
-- [ ] **Task 9:** Write a function that accepts a key and a value, and saves the value to both `localStorage` and `sessionStorage`. Retrieve and log the values from both storage mechanisms.
-- [ ] **Task 10:** Write a function that clears all data from both `localStorage` and `sessionStorage`. Verify that both storages are empty.
+- [X] **Task 9:** Write a function that accepts a key and a value, and saves the value to both `localStorage` and `sessionStorage`. Retrieve and log the values from both storage mechanisms.
+- [X] **Task 10:** Write a function that clears all data from both `localStorage` and `sessionStorage`. Verify that both storages are empty.
 
 ## Feature Request 🎯
 

diff --git a/Day20/index.js b/Day20/index.js
@@ -34,16 +34,72 @@ console.log("\nTask Completed!");
 console.log("-------------------------------------------------");
 console.log("Activity 3: ");
 
+const sessionStorage = new LocalStorage('./session');
 
+// Task 5: Write a script to save a string value to sessionStorage and retrieve it. Log the retrieved value.
+const stringValue = "Hello, Node.js!";
+sessionStorage.setItem('greeting', stringValue);
+
+// Retrieve and log the string value from sessionStorage
+const retrievedString2 = sessionStorage.getItem('greeting');
+console.log('Retrieved string from sessionStorage:', retrievedString2);
+
+// Task 6: Write a script to save an object to sessionStorage by converting it to a JSON string. Retrieve and parse the object, then log it.
+
+// Task 6: Save an object to sessionStorage by converting it to a JSON string
+const userObject = {
+    name: "Yash K. Saini",
+    email: "yashkumarsaini101@gmail.com",
+    age: 20
+};
+
+// Convert object to JSON string and save to sessionStorage
+sessionStorage.setItem('user', JSON.stringify(userObject));
+
+// Retrieve and parse the object from sessionStorage
+const retrievedObjectJSON = sessionStorage.getItem('user');
+const retrievedObject2 = JSON.parse(retrievedObjectJSON);
+
+console.log('Retrieved object from sessionStorage:', retrievedObject2);
 
 console.log("-------------------------------------------------");
 console.log("Activity 4: ");
 
-
+// Task 7: Create a simple form that saves user input (e.g., name and email) to sessionStorage when submitted. Retrieve and display the saved data on page load.
+// Task 8: Write a script to remove an item from sessionStorage. Log the sessionStorage content before and after removal.
+console.log("\nTask Completed!");
 
 console.log("-------------------------------------------------");
 console.log("Activity 5: ");
 
+function saveToStorage(key, value) {
+    // Save to localStorage
+    localStorage.setItem(key, value);
+    // Save to sessionStorage
+    sessionStorage.setItem(key, value);
+
+    // Retrieve and log the values from both storage mechanisms
+    const localStorageValue = localStorage.getItem(key);
+    const sessionStorageValue = sessionStorage.getItem(key);
+
+    console.log(`Value from localStorage: ${localStorageValue}`);
+    console.log(`Value from sessionStorage: ${sessionStorageValue}`);
+}
+
+// Example usage
+saveToStorage('username', 'Yash K. Saini');
+
+function clearAllStorage() {
+    // Clear all data from localStorage
+    localStorage.clear();
+    // Clear all data from sessionStorage
+    sessionStorage.clear();
+
+    // Verify that both storages are empty
+    console.log('localStorage after clear:', JSON.stringify(localStorage, null, 2));
+    console.log('sessionStorage after clear:', JSON.stringify(sessionStorage, null, 2));
+}
 
+// clearAllStorage(); This will clear all the data from both localStorage and sessionStorage
 
 console.log("-------------------------------------------------");
diff --git a/Day20/scratch/username b/Day20/scratch/username
@@ -0,0 +1 @@
+Yash K. Saini
diff --git a/Day20/session/greeting b/Day20/session/greeting
@@ -0,0 +1 @@
+Hello, Node.js!
diff --git a/Day20/session/user b/Day20/session/user
@@ -0,0 +1 @@
+{"name":"Yash K. Saini","email":"yashkumarsaini101@gmail.com","age":20}
diff --git a/Day20/session/username b/Day20/session/username
@@ -0,0 +1 @@
+Yash K. Saini
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"Yash K. Saini","email":"yashkumarsaini101@gmail.com","age":20}