initial commit

2 years ago · bea897b3d9
5 changed files with 78 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,2 @@
+# Some JS features with examples
+
--- a/localStorage/README.md
+++ b/localStorage/README.md
@ -0,0 +1,10 @@
+# locaStorage
+
+Javascript has an API called `localStorage` that let's you store some data in the browser in between sessions, the idea is similar to storing a cookie but it has no expiry date and can store some more data. It is useful to save configuration of web applications, personal preferences, etc. There's no specc'ed limit to how much data the browser let's you store but most common implementations (e.g. Chrome) limit `localStorage` to 10MB, some documentation says 5MB.
+
+To look at the contents of the localStorage database in your browser, you can open the developer tools and in the storage section you should find something like this:
+
+![sshot](devconsole-localStorage.png)
+
+[Read more about localStorage in the spec](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
--- a/localStorage/devconsole-localStorage.png
+++ b/localStorage/devconsole-localStorage.png
--- a/localStorage/example.html
+++ b/localStorage/example.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>localStorage example</title>
+    <style>
+      body {
+        font-family: 'Courier New', monospace;
+      }
+
+      quote {
+        width: 10vw;
+        border-radius: 8px;
+        padding: 1em;
+        background: lightgray;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Config for this page</h1>
+    <div id="result"></div>
+
+    <script src="main.js"></script>
+
+  </body>
+</html>
--- a/localStorage/main.js
+++ b/localStorage/main.js
@ -0,0 +1,38 @@
+var dataToStore = [
+  "file___0001.mp4",
+  "file___0002.mp4",
+  "file___0003.mp4",
+  "file___0004.mp4",
+  "file___0005.mp4",
+  "file___0006.mp4",
+  "file___0007.mp4",
+  "file___0008.mp4",
+  "file___0009.mp4",
+]
+
+let configKey = "video-files";
+
+var restoreHere = null; // variable where we will restore the data that we read from localStorage
+
+// clear all items for this origin on localStorage
+for (var item in localStorage) delete localStorage[item]
+
+// store the contents of the variable `dataToStore` in the localStorage
+// data to be stored needs to be a string, so we JSON.stringify our data
+localStorage.setItem(configKey, JSON.stringify(dataToStore))
+
+// check if the browser supports localStorage
+if (typeof(Storage) == "undefined" || !localStorage) {
+  alert("localStorage not supported in this browser")
+}
+
+// this is how we retrieve our data from the browser's localStorage
+let storedString = localStorage.getItem( configKey )
+let body = document.getElementById('result')
+if(storedString) {
+  restoreHere = JSON.parse( storedString )
+  // print results of fetch on webpage
+  body.innerHTML = `<quote>${restoreHere}</quote>`
+} else {
+  body.innerHTML = '<em>'+ `couldn't find anything in localStorage with key '${configKey}'` +'</em>'
+}