Jump to content
webcoders.pt

Storage, localStorage.clickcount?

Recommended Posts

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

Share this post


Link to post
Share on other sites
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 by KTachyon

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
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?

  • Vote 1

---
 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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/
  • Vote 1

---
 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.