Local Storage

Developer
Dang Van Thanh
Size
2,458 Kb
Views
24,288
  1. Local Storage Previews
  2. Local Storage HTML Codes
  3. Local Storage CSS Codes
  4. Local Storage JS Codes

How do I make an local storage?

What is a local storage? How do you make a local storage? This script and codes were developed by Dang Van Thanh on 13 September 2022, Tuesday.

Local Storage Previews
IQ Test

Local Storage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Storage</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="form"> <p> <input type="text" id="fullname" placeholder="Fullname"/> <input type="text" id="address" placeholder="Address"/> </p> <p> <button id="save">Save</button> <button id="load">Load</button> </p> <p> <button id="clear">Clear</button> <button id="reset">Reset</button> </p>
</div> <script src="js/index.js"></script>
</body>
</html>

Local Storage - Script Codes CSS Codes

.form { margin: 20px;
}
.form input[type="text"] { border: 1px solid #c4c4c4; padding: 5px 10px;
}
.form button { background-color: #214cce; border: 0; border: 1px solid #919191; color: #fff; padding: 7px 15px; width: 80px; cursor: pointer;
}
.form button:hover, .form button:focus { background-color: #0c1b4a;
}

Local Storage - Script Codes JS Codes

var fullname = document.getElementById('fullname'), address = document.getElementById('address'), saveButton = document.getElementById('save'), loadButton = document.getElementById('load'), clearButton = document.getElementById('clear'), resetButton = document.getElementById('reset');
var localStore = { saveLocalStorage: function() { localStorage.setItem('item', JSON.stringify(this.getInputValue())); }, loadLocalStorage: function() { var store = JSON.parse(localStorage.getItem('item')); if ( store ) { fullname.value = store.fullname; address.value = store.address; } }, clearLocalStorage: function() { localStorage.removeItem('item'); }, getInputValue: function() { return { fullname: fullname.value, address: address.value } }
};
saveButton.addEventListener('click', function() { localStore.saveLocalStorage();
}, false);
loadButton.addEventListener('click', function() { localStore.loadLocalStorage();
}, false);
clearButton.addEventListener('click', function() { localStore.clearLocalStorage();
}, false);
resetButton.addEventListener('click', function() { fullname.value = ''; address.value = '';
}, false);
Local Storage - Script Codes
Local Storage - Script Codes
Home Page Home
Developer Dang Van Thanh
Username dangvanthanh
Uploaded September 13, 2022
Rating 3
Size 2,458 Kb
Views 24,288
Do you need developer help for Local Storage?

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!

Dang Van Thanh (dangvanthanh) Script Codes
Name
Simple Carousel Pure CSS
Pure CSS Off Canvas Icon
Browser Pure CSS3
Rotate in CSS3 3D Transform
Simple Navigation and Transition
Modal Bootstrap with ReactJS
Rotate in CSS3 Transform
Checkboxes jQuery Plugin
Tooltips using CSS Triangles Mixin
CSS3 Multi-Column Module 1
Create amazing art & images 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!