mdn: using-the-web-storage-api

kesava-karri · Apr 5, 2024 · d2060c4 · d2060c4
1 parent 6c59ffc
commit d2060c4
Show file tree

Hide file tree

Showing 14 changed files with 1,303 additions and 0 deletions.
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/event.html b/javascript/intermediate-js/using-the-web-storage-api/web-storage/event.html
@@ -0,0 +1,29 @@
+<!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" />
+
+    <title>Web Storage API storage event output</title>
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <h1>Event output</h1>
+
+      <ul>
+        <li>Key: <span class="my-key"></span></li>
+        <li>Old value: <span class="my-old"></span></li>
+        <li>New value: <span class="my-new"></span></li>
+        <li>URL: <span class="my-url"></span></li>
+        <li>Storage area: <span class="my-storage"></span></li>
+      </ul>
+
+      <p>Go back to the <a href="index.html">main example page</a>.</p>
+    </div>
+    <script src="event.js"></script>
+  </body>
+</html>
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/event.js b/javascript/intermediate-js/using-the-web-storage-api/web-storage/event.js
@@ -0,0 +1,7 @@
+window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});
diff --git a/...ript/intermediate-js/using-the-web-storage-api/web-storage/images/crocodile.png b/...ript/intermediate-js/using-the-web-storage-api/web-storage/images/crocodile.png
diff --git a/...ript/intermediate-js/using-the-web-storage-api/web-storage/images/firefoxos.png b/...ript/intermediate-js/using-the-web-storage-api/web-storage/images/firefoxos.png
diff --git a/...cript/intermediate-js/using-the-web-storage-api/web-storage/images/tortoise.png b/...cript/intermediate-js/using-the-web-storage-api/web-storage/images/tortoise.png
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/index.html b/javascript/intermediate-js/using-the-web-storage-api/web-storage/index.html
@@ -0,0 +1,61 @@
+<!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" />
+
+    <title>Web Storage API example</title>
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="wrapper">
+      <h1>Web storage</h1>
+
+      <p>
+        This example is designed to demonstrate usage of the
+        <a
+          href="https://html.spec.whatwg.org/multipage/webstorage.html#webstorage"
+          >W3C Web Storage API</a
+        >. It should work as far back as IE8. Choose custom background colours,
+        logos and fonts from the below drop down menus, then try closing and
+        reopening the page — you will find that your choices are remembered, as
+        they are stored using Web Storage. You can also visit the
+        <a href="event.html" target="_blank">storage event output</a> (opens in
+        new tab). Open this, change some values in the index page, then look at
+        the events page — you'll see the storage changes reported.
+      </p>
+
+      <form>
+        <div>
+          <label for="bgcolor">Choose background color:</label>
+          <input class="color" id="bgcolor" value="FF0000" />
+        </div>
+        <div>
+          <label for="font">Choose font style:</label>
+          <select id="font">
+            <option value="sans-serif" selected>Sans-serif</option>
+            <option value="serif">Serif</option>
+            <option value="monospace">Monospace</option>
+          </select>
+        </div>
+        <div>
+          <label for="image">Choose image:</label>
+          <select id="image">
+            <option value="images/firefoxos.png" selected>Firefox</option>
+            <option value="images/crocodile.png">Crocodile</option>
+            <option value="images/tortoise.png">Tortoise</option>
+          </select>
+        </div>
+      </form>
+
+      <footer></footer>
+      <img src="images/firefoxos.png" />
+    </div>
+
+    <script src="jscolor/jscolor.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/arrow.gif b/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/arrow.gif
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/cross.gif b/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/cross.gif
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/demo.html b/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/demo.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>jscolor demo</title>
+</head>
+<body>
+
+	<script type="text/javascript" src="jscolor.js"></script>
+
+	Click here: <input class="color" value="66ff00">
+
+</body>
+</html>
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/hs.png b/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/hs.png
diff --git a/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/hv.png b/javascript/intermediate-js/using-the-web-storage-api/web-storage/jscolor/hv.png