Storage, localStorage.clickcount?

[webcoders.pt]

Saudações a todos

Amigos, sou novato e autodidata em programação e careço da vossa ajuda, sff.
Estou desenvolvendo um script que conta cliques e descobri dois códigos. Ambos contam os cliques nos botões, mas um zera qdo atualizamos a janela ou fechamo-la. O outro guarda o valor registado. O primeiro já estudei-o e entendi-o perfeitamente, mas o outro sinto alguma dificuldade em entendê-lo. Eis o função:

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {localStorage.clickcount = Number(localStorage.clickcount)+1;}
        else {localStorage.clickcount = 1;}
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";}
    else {document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";}
    }

As dúvidas:

Storage é uma variável ou um objeto?
localStorage é um objeto e clickcount um método?
Number é um modo de tipificar uma variável em Javascript?

Nenhum dos livros sobre Javascript que possuo fala sobre Storage e localStorage. Será que são do HTML5?

Por favor, quem souber, ajude-me.

Com os melhores cumprimentos

[KTachyon]

Não me parece que seja assim que a localStorage deva ser utilizada. A forma correcta é:

var clickcount = localStorage.getItem('clickcount');
localStorage.setItem('clickcount',  clickcount);

A forma como o autor deveria funcionar correctamente em todos os browsers modernos, mas tal não é garantido, pelo que devem ser utilizados os métodos para tal.

Ou muito me engano, ou o Storage também estará aí mal. Penso que o que o autor quereria testar era se o localStorage existe e não se o Storage existe.

localStorage é um objecto com funções para aceder a um mecanismo que te permite guardar dados no browser do utilizador para o teu domínio. clickcount, da forma como o autor a usa, é uma variável desse objecto, mas essa não é a forma certa de utilização da localStorage.

Number é para garantir que o que quer que seja o valor dessa variável, é convertido em número:

Number(1) // 1
Number("2") // 2
Number(null) // 0

A localStorage não está directamente associada ao HTML5.

Edited May 12, 2017 at 12:37 PM by KTachyon

[webcoders.pt]

Olá, Ktachyon.

Obrigado por responder.

O script tirei-o do w3schools
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount

Edited May 12, 2017 at 12:39 PM by webcoders.pt

[jacreis]

Storage "The Storage interface of the Web Storage API provides access to the session storage or local storage for a particular domain, allowing you to for example add, modify or delete stored data items." - Mozilla Foundation

O  if(typeof(Storage) !== "undefined") serve apenas para ver se o browser têm o interface storage.

+info :  

- https://developer.mozilla.org/en-US/docs/Web/API/Storage
- https://html.spec.whatwg.org/multipage/webstorage.html#the-storage-interface
- https://www.html5rocks.com/en/features/storage

O Storage têm 2 mecanismos:

sessionStorage "maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)"
localStorage "does the same thing, but persists even when the browser is closed and reopened."

+info :  https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

O Number é o data type numérico do JS  (Só para complementar a resposta do @KTachyon)

+info :  https://developer.mozilla.org/en-US/docs/Glossary/Number

[observações]

- Não sei se w3schools não é o melhor local para saber mais sobre JS. Deixo a referencia da mozilla foundation.
- O Storage faz parte do living standard HTML5 https://html.spec.whatwg.org/#is-this-html5?

[webcoders.pt]

@jacreis, obg pela resposta. Ajudou-me sobremodo.

Cptos a todos

[webcoders.pt]

Olá, @jacreis.

Consultei as fontes que você deu-me, mas continuo sem entender o clickcount, pois ele não aparece como sendo um método de localStorage. Você poderia explicar-me exatamente o que ele é?

Desculpe-me fazer mais uma pergnta tola, mas na frase: if (localStorage.clickcount) {loc... Se a sentença localStorage dentro dos parêntesis é uma condição, qual a condição exatamente a ser satisfeita?

Obrigado

[jacreis]

Quando guardas um objecto no Storage, guardas no formato chave=>valor, que podem ser geridos como objectos ou através dos métodos:  Storage.getItem() ou Storage.setItem(). As 3 linhas abaixo são formas análogas de fazer a mesma coisa, i.e. guardar informação.

localStorage.clickcount = 70; 
localStorage['clickcount'] = 70; 
localStorage.setItem('clickcount', 70);

Quanto ao if (localStorage.clickcount) está simplesmente a testar se existe a chave clickcount, caso não exista cria uma com o valor 1.

Bónus extra: Na minha opinião a forma como o código está implementado não é a mais melhor boa. Isto porque não retorna info nenhuma quando ocorre um erro, por exemplo quando excedes o espaço de storage.

Eu consideraria o seguinte código, para guardar informação

try { 
  localStorage.setItem('teste', 'algo que quero guardar'); 
} catch(e) { 
  if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { 
    // Opssss no more space to store
  } else { 
  	// WTF?? :|
  } 
}

Documentação:

1. https://johnresig.com/blog/dom-storage/
2. https://stackoverflow.com/questions/4391575/how-to-find-the-size-of-localstorage
3. https://localstorage-use-not-abuse.appspot.com/

[webcoders.pt]

@jacreis, mais uma vez uma resposta magnífica típica de alguém que sabe o que fala.

O meu sincero muito obrigado.

Cptos.

[jacreis]

👍