commit bea897b3d9d2fcd24c2a1c15053a067789072fc9 Author: Luis Rodil-Fernandez Date: Sun Sep 18 21:34:56 2022 +0200 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..6b85cd9 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# Some JS features with examples + diff --git a/localStorage/README.md b/localStorage/README.md new file mode 100644 index 0000000..0b3cb1f --- /dev/null +++ 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). + diff --git a/localStorage/devconsole-localStorage.png b/localStorage/devconsole-localStorage.png new file mode 100644 index 0000000..c460e9a Binary files /dev/null and b/localStorage/devconsole-localStorage.png differ diff --git a/localStorage/example.html b/localStorage/example.html new file mode 100644 index 0000000..a0251be --- /dev/null +++ b/localStorage/example.html @@ -0,0 +1,28 @@ + + + + + + + localStorage example + + + +

Config for this page

+ + + + + diff --git a/localStorage/main.js b/localStorage/main.js new file mode 100644 index 0000000..0fdd061 --- /dev/null +++ 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 = `${restoreHere}` +} else { + body.innerHTML = ''+ `couldn't find anything in localStorage with key '${configKey}'` +'' +}