LocalStorage Test

Developer
Gabriel
Size
2,927 Kb
Views
40,480
  1. LocalStorage Test Previews
  2. LocalStorage Test HTML Codes
  3. LocalStorage Test CSS Codes
  4. LocalStorage Test JS Codes

How do I make an localstorage test?

HTML5 Web Storage: set | read | clear a value with html5 localStorage. styled with bootstrap3.. What is a localstorage test? How do you make a localstorage test? This script and codes were developed by Gabriel on 18 July 2022, Monday.

LocalStorage Test Previews
IQ Test

LocalStorage Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>localStorage Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*
just bootstrap.
(html > settings > Stuff for <head>)
===================================================
Everything tested and worked on Google Chrome 30 on Mac OS X 10.8 and on Win7 SP1 x64
*/
#yay, #ooh {display: none;} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="page-header"> <h1>localStorage <small>just a test...</small></h1> <div class="alert alert-success" id="yay">Your browser supports Web Storage. Yay!</div> <div class="alert alert-danger" id="ooh">Oooh... Your browser seems to be retarted. He can't use Web Storage.</div>
</div> <div class="row"> <div class="col-md-6"> <h3>save a value</h3> <form action="#" class="form-inline"> <div class="form-group"> <input type="text" name="save" id="text" class="form-control" placeholder="save a value here..."> </div> <button id="set" class="btn btn-primary">save</button> </form> <hr> <h3>read the value</h3> <div class="alert alert-info" id="val"><i>nothing saved...</i></div> <button id="get" class="btn btn-success">get saved value</button> <button id="remove" class="btn btn-danger">clear the value</button> </div> <div class="col-md-6"> <hr class="visible-sm visible-xs"> <h3>About</h3> <b>Features:</b> <ul> <li>You can set, read and clear the value.</li> <li>The saved value is saved on your device.</li> <li>On a page refresh or browser restart there should be the last saved value.</li> <li>Even on a reboot the value should be saved.</li> <li>more information <a href="http://www.w3schools.com/html/html5_webstorage.asp" target="_top">here</a></li> </ul> <b>Everything tested and worked on:</b> <ul> <li>Google Chrome 30 on Mac OS X and on Win7</li> <li>Mozilla Firefox 24 on Mac OS X and on Win7</li> <li>IE9, IE10 on Win7</li> <li><i>and if not supported - create a fallback to cookies.</i></li> </ul> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

LocalStorage Test - Script Codes CSS Codes

/*
just bootstrap.
(html > settings > Stuff for )
===================================================
Everything tested and worked on Google Chrome 30 on Mac OS X 10.8 and on Win7 SP1 x64
*/
#yay, #ooh {display: none;}

LocalStorage Test - Script Codes JS Codes

/* Detect browser can use web storage */
if (!typeof(Storage) !== 'undefined') { $('#yay').fadeIn('slow');
} else { $('#ooh').fadeIn('slow');
}
/* set it */
$('#set').click(function() { var test = $('#text').val(); localStorage.setItem("test", test);
});
/* get it */
$('#get').click(function() { $('#val').text(localStorage.getItem("test"));
});
/* remove it */
$('#remove').click(function() { localStorage.removeItem("test");
});
$('#val').text(localStorage.getItem("test"));
LocalStorage Test - Script Codes
LocalStorage Test - Script Codes
Home Page Home
Developer Gabriel
Username gab
Uploaded July 18, 2022
Rating 4
Size 2,927 Kb
Views 40,480
Do you need developer help for LocalStorage Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gabriel (gab) Script Codes
Name
Loggy.js - CSS formatted JS console logs
Inline editing with jquery
Replace a not existing img
Font awesome Hamburger-Menu-Toggle
Animated Trash Icon pure CSS
Css3 background-clip
CSS3 Login
Image rendering
Chrome notifications test
BEST PLACEHOLDING SERVICES
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!