index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<button id="green">Green</button>
<button id="red">Red</button>
</body>
</html>
1.js
// F12 - Application - Local Storage
window.onload = function() {
// console.log(localStorage.getItem('ggg')); // получим значение из localStorage, Дает null, если такого значения нет
if(localStorage.getItem('bgcolor') !== null) {
var color = localStorage.getItem('bgcolor');
document.getElementsByTagName('body')[0].style.background = color;
}
// При нажатии на кнопку фон становится зеленым
document.getElementById('green').onclick = function() {
console.log('work');
document.getElementsByTagName('body')[0].style.background = 'green';
localStorage.setItem('bgcolor', 'green'); // значение должно быть строкой!!!
}
// При нажатии на кнопку фон становится красным
document.getElementById('red').onclick = function() {
console.log('work');
document.getElementsByTagName('body')[0].style.background = 'red';
localStorage.setItem('bgcolor', 'red'); // значение должно быть строкой!!!
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<button id="green">Green</button>
<button id="red">Red</button>
</body>
</html>
1.js
// F12 - Application - Local Storage
window.onload = function() {
// console.log(localStorage.getItem('ggg')); // получим значение из localStorage, Дает null, если такого значения нет
if(localStorage.getItem('bgcolor') !== null) {
var color = localStorage.getItem('bgcolor');
document.getElementsByTagName('body')[0].style.background = color;
}
// При нажатии на кнопку фон становится зеленым
document.getElementById('green').onclick = function() {
console.log('work');
document.getElementsByTagName('body')[0].style.background = 'green';
localStorage.setItem('bgcolor', 'green'); // значение должно быть строкой!!!
}
// При нажатии на кнопку фон становится красным
document.getElementById('red').onclick = function() {
console.log('work');
document.getElementsByTagName('body')[0].style.background = 'red';
localStorage.setItem('bgcolor', 'red'); // значение должно быть строкой!!!
}
}
Комментариев нет:
Отправить комментарий