localStorage gebruiken met jQuery

Er zijn verschillende manieren om gegevens die binnen een website aangepast worden op te slaan. De eenvoudigste manier is om gebruik te maken van de localStorage. We bekijken hier een simpele manier om de hoogste score op te slaan. We beginnen met een getal op te slaan in een variabel. Vervolgens wordt de variabel verhuisd naar de localStorage.

Om te beginnen hebben we een input-veld nodig waarin we een getal kunnen invoeren. Ook hebben we een knop nodig waar we op kunnen klikken om het getal op te slaan.

<body>
     <input type=”text” name=”nieuw”>
     <input type=”button” value=”opslaan”>
</body>

Nadat we jQuery gelinkt hebben kunnen we de knop “opslaan” naar de muisklik laten luisteren. Voordat er jQuery opdrachten uitgevoerd mogen worden willen we zeker weten dat het document klaar/geladen is.

<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(e)
{

});
</script>
</body>

Nu kunnen we de knop “opslaan” naar de muis laten luisteren.

<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script>
$(document).ready(function(e)
{
     $(“input[value=opslaan]”).click();
});
</script>
</body>

Als er op de knop “opslaan” geklikt wordt, wordt de inhoud van het invoerveld “name” gelezen en opgeslagen in de variabel “nieuwGetal”. Vervolgens controleren we de waarde van “nieuwGetal” in een pop-up venster.

<script>
var nieuwGetal;

$(document).ready(function(e)
{
     $(“input[value=opslaan]”).click(function(e)
     {
          nieuwGetal=$(“input[name=nieuw]”).val();
          alert(nieuwGetal)
     });
});
</script>

De ingevoerde waarde van “nieuwGetal” wordt door de browser onthouden totdat er een nieuwe waarde ingevuld wordt, of totdat het tabblad weg geklikt wordt. We kunnen de localStorage gebruiken om de browser het getal ook te laten onthouden als het tabblad, of zelfs de hele browser gesloten wordt. Binnen de localStorage maken we een variabel aan met de naam “opgeslagen”. Die variabel krijgt de waarde van “nieuwGetal”.

<script>
var nieuwGetal;

$(document).ready(function(e)
{
     $(“input[value=opslaan]”).click(function(e)
     {
          nieuwGetal=$(“input[name=nieuw]”).val();
         //alert(nieuwGetal);
         localStorage.opgeslagen=nieuwGetal;
         alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
     });
});
</script>

Om een soort ‘hoogste score’ weergave te krijgen moeten we ervoor zorgen dat niet elk willekeurig getal opgeslagen kan worden in de localStorage. Het getal mag alleen opgeslagen worden als het hoger is dan het getal dat al opgeslagen is. Daarvoor moeten we wel zeker weten dat de waarde van “nieuwGetal” gelezen wordt als een cijfer, niet als een tekst. We gebruiken de functie “Number()” om de waarde van het tekstveld met de naam “nieuw” te lezen als een getal.

<script>
var nieuwGetal;

$(document).ready(function(e)
{
     $(“input[value=opslaan]”).click(function(e)
     {
          nieuwGetal=Number($(“input[name=nieuw]”).val());
         //alert(nieuwGetal);
         localStorage.opgeslagen=nieuwGetal;
         alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
     });
});
</script>

Voordat de waarde van “nieuwGetal” opgeslagen wordt in de localStorage moet gecontroleerd worden of het getal wel hoger is dan het getal dat al opgeslagen is. Daarvoor moeten we eerst controleren of er al een getal opgeslagen is in de localStorage. Als dat niet zo is wordt er een waarde “0” gegeven aan de variabel “opgeslagen” in de localStorage.

<script>
var nieuwGetal;

$(document).ready(function(e)
{
     if(localStorage.opgeslagen)
     {
          alert(“In de localStorage is opgeslagen:”+ localStorage.opgeslagen);
     }
     else
     {
          localStorage.opgeslagen=0;
          alert(“het getal 0 is opgeslagen in de localStorage”)
     }

     $(“input[value=opslaan]”).click(function(e)
     {
          nieuwGetal=Number($(“input[name=nieuw]”).val());
          //alert(nieuwGetal);
          localStorage.opgeslagen=nieuwGetal;
         alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
     });
});
</script>

Voordat er een nieuw getal opgeslagen wordt eerst gecontroleerd of het nieuwe getal wel hoger is dan het opgeslagen getal in de localStorage. Daarvoor moet de klikfunctie van de knop “opslaan” aangepast worden:

$(“input[value=opslaan]”).click(function(e)
{
     nieuwGetal=Number($(“input[name=nieuw]”).val());
     //alert(nieuwGetal);
     if(nieuwGetal > localStorage.opgeslagen)
     {
          localStorage.opgeslagen=nieuwGetal;
          alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
     }
     else
     {
          alert(“voer een hoger getal in dan: “+ localStorage.opgeslagen);
     }
});

De waarde van de variabel “opgeslagen” wordt nu door de browser onthouden (tot de cache gewist wordt).  Als laatste stap kijken we naar de mogelijkheid om de gegevens in de localStorage zelf te wissen. Eerst hebben we een nieuwe knop nodig:

<body>
<input type=”text” name=”nieuw”>
<input type=”button” value=”opslaan”>
<input type=”button” value=”wissen”>

Vervolgens geven we de nieuwe knop “wissen” een klikfunctie. Als er op de knop geklikt wordt wordt het item “opgeslagen” gewist uit de localStorage:

<script>
var nieuwGetal;

$(document).ready(function(e)
{
     if(localStorage.opgeslagen)
     {
          alert(“In de localStorage is opgeslagen:”+ localStorage.opgeslagen);
     }
     else
     {
          localStorage.opgeslagen=0;
          alert(“het getal 0 is opgeslagen in de localStorage”)
     }

     $(“input[value=opslaan]”).click(function(e)
     {
          nieuwGetal=Number($(“input[name=nieuw]”).val());
          //alert(nieuwGetal);
          if(nieuwGetal>localStorage.opgeslagen)
          {
               localStorage.opgeslagen=nieuwGetal;
               alert(“Het getal: ” + nieuwGetal +” is opgeslagen in de localStorage”);
          }
          else
          {
               alert(“voer een hoger getal in dan: “+ localStorage.opgeslagen);
          }
     });

     $(“input[value=wissen]”).click(function(e)
     {
          localStorage.removeItem(“opgeslagen”);
     });
});
</script>

<script>

1,753 thoughts on “localStorage gebruiken met jQuery”

  2. It’s actually a great and useful piece of information.
    I am happy that you simply shared this useful info with us.
    Please keep us informed like this. Thank you for sharing.

    Reply

  4. excellent issues altogether, you just gained a new
    reader. What might you suggest in regards to your post that you just made a few
    days in the past? Any sure?

    Reply

  7. [url=https://kursy-ege.ru/complementary/49-podgotovka-k-sochineniu.html]подготовка к сочинению[/url] – подготовка к егэ 2020, подготовка к егэ по английскому языку

    Reply

  8. [url=https://mukis.ru]купоны гугл адвордс 3000[/url] – промокод яндекс директ 3000 3000, промокод яндекс директ 3000 10000

    Reply

  10. [url=https://stop-nark.ru/narko/22-detoksikaciya-organizma.html]детоксикация наркоманов[/url] – лечение алкоголизма в стационаре, сколько стоит реабилитация наркозависимых

    Reply

  11. #Hookahmagic
    Мы всегда с Вами и стараемся нести только позитив и радость.
    Ищите Нас в соцсетях,подписывайтесь и будьте в курсе последних топовых событий.
    Строго 18+

    Кальянный бренд Фараон давно завоевал сердца ценителей кальянной культуры вариативностью моделей кальянов,
    приемлемым качеством и низкой ценовой политикой. Именно эти факторы играют главную роль в истории его успеха. Не упускайте очевидную выгоду и вы! Заказывайте кальян Pharaon (Фараон) 2014 Сlick в интернет-магазине HookahMagic и оформляйте доставку в любой регион РФ. Мы гарантируем быструю доставку и высокое качество предоставляемой продукции.

    https://h-magic.su/kalyan
    Удачных вам покупок!

    Reply

  15. Very great post. I simply stumbled upon your blog and wished to say that I have really loved browsing your blog posts.
    After all I’ll be subscribing in your feed and I hope you write again soon!

    Reply

  17. Hey There. I found your blog using msn. This is a
    really well written article. I’ll be sure to bookmark it and come back to read more of
    your useful information. Thanks for the post.
    I’ll definitely comeback.

    Reply

  20. Thɑnk you for the auѕpicious wгiteup. It actually useɗ to be a enjoyment account it.
    Glancе complex to more brought aɡreeable from you! By the way, how can ᴡe be in contact?

    Feel free to surf to my site: Dominoqq

    Reply

  25. Do you have any tips on how to solve this?:(

    [url]https://castrolentz50.tumblr.com/post/626410665756819456/%D0%BF%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%81%D1%82%D0%B8%D0%BA%D1%83-%D0%B8-%D1%88%D0%B0%D0%BD%D1%81%D1%8B-%D0%B6%D0%BE%D0%BA%D0%B5%D1%8F[/url]
    [url]http://mossmoss44.jigsy.com/entries/general/%D0%A1%D1%82%D1%80%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%D0%B8-%D1%81%D1%82%D0%B0%D0%B2%D0%BE%D0%BA-%D0%BD%D0%B0-%D1%81%D0%BF%D0%BE%D1%80%D1%82[/url]
    [url]http://ity.im/ROEVw[/url]
    [url]https://www.viki.com/users/mikkelsenriise65dakj_312/about[/url]
    [url]https://all4webs.com/clemonswhittaker30/koxaffiyoa792.htm[/url]
    [url]https://bekkerwichmann71.tumblr.com/post/626141618495537152/%D0%BA%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%81%D0%B0%D0%B9%D1%82-%D1%81%D0%BE-%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0%D0%BC%D0%B8-%D0%BD%D0%B0-%D1%81%D0%BF%D0%BE%D1%80%D1%82[/url]
    [url]https://thinfi.com/sgzz[/url]
    [url]http://asilonelboscovicenza.it/membri/mcallisterbonner9/activity/72801/[/url]

    Reply

  33. Can you help me with this? =(

    [url]https://quinlanyusuf4.webgarden.cz/rubriky/quinlanyusuf4-s-blog/unnamed[/url]

    Reply

  37. I really cannot find the correct answer, would you give me a hand here?=(

    [url]https://squareblogs.net/skaaning04mcallister/sovety-po-stavkam-na-sport[/url]
    [url]http://morsingtorres77.fikket.com/[/url]
    [url]https://www.gaiaonline.com/profiles/baincarr2/45119958/[/url]
    [url]https://www.vocabulary.com/profiles/B06WEKX2KQGO2O[/url]

    Reply

  40. [url=https://ananumous.ru/kak_mozhno_protschitat_tschuzhoj_whatsapp.php]Как можно читать чужой whatsapp [/url] – Как прочитать чужой whatsapp на айфоне, Как читать удаленные сообщения в whatsapp

    Reply

  41. идеальный сайт
    [url=https://sexreliz.net/anal/841-pust-muzh-posmotrit.html]https://sexreliz.net/anal/841-pust-muzh-posmotrit.html[/url]

    Reply

  42. безукоризненный сайт
    [url=https://pizdeishn.net/gruppa/272-era-vseobschego-naslazhdeniya.html]https://pizdeishn.net/gruppa/272-era-vseobschego-naslazhdeniya.html[/url]

    Reply

  55. высококачественный вебсайт
    [url=https://xn--80aebzmbfeebe.xn--p1ai/product-category/zapchasti/lighting/]LED Подсветка для телевизора запчасти купить[/url]

    Reply

  81. Wonderful blog! I found it while browsing on Yahoo News.

    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem
    to get there! Thank you

    Reply

  137. [url=https://petscar.ru/]перевезти собаку за границу[/url] – перевозка лошадей, перевозка собак

    Reply

  257. [url=https://it-worlds.com/ru/development/]создание сайтов лендингов[/url] – магазин сайт под ключ, накрутить подписчиков

    Reply

  363. #Hookahmagic
    Мы всегда с Вами и стараемся нести только позитив и радость.
    Ищите Нас в соцсетях,подписывайтесь и будьте в курсе последних топовых событий.
    Строго 18+

    Какой кальян купить новичку?
    Если это первая покупка, то лучше начать с более простых моделей. Это изделия со средней высотой (70 см) и одной насадкой. Количество труб влияет на работу устройства. Это будет трудная задача.

    Очень важно обращать внимание на материал шахты. Чем он прочнее, тем дольше прибор прослужит. Срок службы устройства минимум на 10 лет.

    https://h-magic.su/caesar
    Рекомендуется обращать внимание на внутренний диаметр шахты. Он должен быть минимум 12 см.

    Можно рассмотреть также электронные изделия. Они компактные и простые в использовании. Безопасный дым. Его можно курить (парить) даже в общественных местах. Что касается его вкусовых качеств – они ничем не уступают традиционным устройствам. Какой электронный кальян купить лучше? Самый распространенный гаджет – площадь Sturbuzz.

    [url=https://outerspacezombieinvasion.com/forums/topic/%d0%b7%d0%b0%d0%ba%d0%b0%d0%b7%d1%8b%d0%b2%d0%b0%d0%b9%d1%82%d0%b5-%d1%83-%d0%bb%d1%83%d1%87%d1%88%d0%b8%d1%85-2/]Заказывайте у лучших[/url] 27a8756

    Reply