Merge pull request #42 from AzharAli-github/main

AzharAli-github · web-flow · commit 98b26cb9e165 · 2023-01-22T03:00:41.000+05:00
web-storage-API
diff --git a/JavaScript/Advance/Web API/web-storage API/images/js-logo.png b/JavaScript/Advance/Web API/web-storage API/images/js-logo.png
diff --git a/JavaScript/Advance/Web API/web-storage API/index.html b/JavaScript/Advance/Web API/web-storage API/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>web-storage API</title>
+</head>
+
+<body>
+    <h1>Web Storage API</h1>
+    <button onclick="DisplayOne()">View Doc</button>
+    <p id="textOne"></p>
+    <!-- Example One for localStorage() -->
+    <h2>localStorage</h2>
+    <button onclick="DisplayTwo()">view</button>
+    <p id="textTwo"></p>
+    <script src="script.js"></script>
+    <!-- Example Two for sessionStorage() -->
+    <h2>sessionStorage</h2>
+    <button onclick="DisplayThree()">view</button>
+    <p id="textThree"></p>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Web API/web-storage API/script.js b/JavaScript/Advance/Web API/web-storage API/script.js
@@ -0,0 +1,34 @@
+/* Storage API are used for storing data files
+    There are two main types of storing data in web page
+       1. localStorage() --> used for storing data permenantly
+       2. sessionStorage() --> used for storing data for short period of time
+*/
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.innerHTML = `
+    <h2>Storage API are of Two Types</h2>
+    <h3>1. localStorage: ()</h3>
+    <p>Used for Storing Data Permanently</p>
+    <h3>2. sessionStorage()</h3>
+    <p>Used for Storing Data Short Time</p>
+    `
+}
+
+// Example One localStorage()
+
+let textTwo = document.getElementById('textTwo');
+
+function DisplayTwo() {
+    localStorage.setItem("name", "Azhar");
+    textTwo.innerHTML = localStorage.getItem("name");
+}
+
+// Example Two sessionStorage()
+
+let textThree = document.getElementById('textThree');
+
+function DisplayThree() {
+    sessionStorage.setItem("name", "Musharraf");
+    textThree.innerHTML = sessionStorage.getItem("name");
+}
