Browse Source

initial commit

master
Luis Rodil-Fernandez 2 years ago
commit
bea897b3d9
  1. 2
      README.md
  2. 10
      localStorage/README.md
  3. BIN
      localStorage/devconsole-localStorage.png
  4. 28
      localStorage/example.html
  5. 38
      localStorage/main.js

2
README.md

@ -0,0 +1,2 @@
# Some JS features with examples

10
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).

BIN
localStorage/devconsole-localStorage.png

After

Width: 2070  |  Height: 572  |  Size: 170 KiB

28
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>

38
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>'
}
Loading…
Cancel
Save