Dia 36/2019 - Webstorage: sessionStorage e LocalStorage

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 36, mostrando o uso do webstorage.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 36</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; outline: none; }
body { background: #000; font-family: Arial, Helvetica, sans-serif; }
.container { margin: 20px auto; max-width: 992px; text-align: center; width: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="./day-36.css">
</head>
<body>
<div class="container">
<!-- form -->
</div>
<script src="./day-36.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form">
<header class="header">
<input class="header-input" autocomplete="off" data-js="listName" placeholder="Insert the list name" type="text" value="">
</header>
<div class="content"></div>
<footer class="footer">
<input class="addItem" autocomplete="off" data-js="addItem" placeholder="Add" type="text">
</footer>
<div class="buttons">
<button class="button button--save" data-js="save">Save List</button>
<button class="button button--delete" data-js="delete">Delete List</button>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.form { background: #fff; width: 100%; }

.header { background: #5f1888; padding: 1rem; }
.header-input {
background: transparent;
border: none;
color: #fff;
font-size: 1rem;
padding: 0 1rem;
outline: none;
text-align: center;
width: 100%;
}

.content { border-bottom: 2rem solid #fff; height: 10rem; overflow-y: scroll; overflow-x: hidden; }
.item:nth-of-type(odd) { background: #e7edf0; }

.footer { border-bottom: 1px solid #eee; border-top: 1px solid #eee; }
.addItem {
background: transparent;
border: none;
color: #999;
font-size: 1rem;
height: 2rem;
outline: none;
padding: 0 1rem;
text-align: center;
width: 100%;
}

.buttons { padding: 10px 0; }
.button {
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
}
.button--save { background: #3a97a5; }
.button--delete { background: #ca4a50; }

.button:active { opacity: 0.4; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const list = [];
let listName;

const inpListName = document.querySelector('[data-js="listName"]');
const inpAddItem = document.querySelector('[data-js="addItem"]');

const buttonSave = document.querySelector('[data-js="save"]');
const buttonDelete = document.querySelector('[data-js="delete"]');

const content = document.querySelector('.content');

inpListName.addEventListener('keypress', evt => {
if (evt.which == 13) { // enter
listName = evt.target.value;
localStorage.setItem("listName", listName);
}
});

inpAddItem.addEventListener('keypress', evt => {
if (evt.which == 13) { // enter
list.push(evt.target.value);

console.log(list);

const item = document.createElement('div');
item.setAttribute('class', 'item');
item.innerHTML = evt.target.value;
content.appendChild(item);

evt.target.value = '';
}
});

buttonSave.addEventListener("click", () => {
localStorage.setItem("list", list.join(','));
localStorage.setItem("listName", listName);
});

buttonDelete.addEventListener('click', () => {
localStorage.clear();
inpListName.setAttribute('value', '');
content.innerHTML = '';
});

// load
if(localStorage.getItem("list")) {
const retrieve = localStorage.getItem("list").split(',');
inpListName.setAttribute('value', localStorage.getItem("listName"));

for (let i = 0; i < retrieve.length; i++) {
const child = document.createElement('div');
child.setAttribute('class', 'item');
child.innerHTML = `${retrieve[i]}`;
content.appendChild(child);
}
}

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Relacionados

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.