JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<pre id="log"></pre>

JavaScript

var myStorage = {};

(function() {
    if (window.localStorage) {
        // Notice that data is always parsed to/from JSON, because
        // localStorage is text based storage and this way we can
        // store objects in it too
        myStorage.get = function(key) {
            return JSON.parse(localStorage.getItem(key));
        };
        myStorage.set = function(key, data) {
            localStorage.setItem(key, JSON.stringify(data));
        };
        myStorage.unset = function(key) {
            localStorage.removeItem(key);
        };
    } else {
        // write cookie based fallback code here...
    }
})();

$('#log').append('get someTest: ' + myStorage.get('someTest') + '<br />');
$('#log').append('<br />---<br /><br />');
$('#log').append('set someTest as "hello world!"<br />');
myStorage.set('someTest', 'hello world!');
$('#log').append('get someTest: ' + myStorage.get('someTest') + '<br />');
$('#log').append('<br />---<br /><br />');
$('#log').append('set someTest as object {name:"John", gender:"Male"}<br />');
myStorage.set('someTest', {
    name: "John",
    gender: "Male"
});
$('#log').append('get someTest: ' + myStorage.get('someTest') + '<br />');
$('#log').append('get someTest.name: ' + myStorage.get('someTest').name + '<br />');
$('#log').append('<br />---<br /><br />');
$('#log').append('unset someTest<br />');
myStorage.unset('someTest');
$('#log').append('get someTest: ' + myStorage.get('someTest') + '<br />');