Local Storage [js]

[Pok4]

Обмислям да направя едно малко екстеншънче за Argos и ще работи с local storage.
Целта ще е да запазва текста в textarea-та във фронт частта (контактна форма и коментари) Ще има опция, да се разширява, ако някой иска да си го направи и за някой от другите екстеншъни)
Ще запазва текста, тъй като след рефреш той изчезва и е досадно, ако сте объркали някоя captch-a да пишете пак всичко наново.

Аз вече съм го ползвал един път за това и знам как да стане, но пускам темата, за да видя дали и вие сте работили и какво сте запазвали в него ?

localStorage in JavaScript: A complete guide - LogRocket Blog

Arm yourself with the knowledge and power of localStorage in JavaScript applications with these five different storage methods.

blog.logrocket.com

Window.localStorage - Web APIs | MDN

The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.

developer.mozilla.org

 

[Blinky]

Определено е полезно. Много мразя като дам събмит някъде и случайно съм пропуснал някое поле или неправилно попълнено да ми рефрешне страницата и да ме накара отново да го направя. Направо им тегля една майна на фронт ендърите. То реално дори не е нудно да рефрешва страницата, просто се прави ауторизация на фронта, и след това пуска.

 

[uphero]

Не е това начина.
Най-лесно и удобно за мен е тия неща да се случват без презареждания.

 

[Blinky]

Не е това начина.
Най-лесно и удобно за мен е тия неща да се случват без презареждания.

Да, дяволски си прав. Не е нужно да се презарежда, както и да се пазят филдове, достатъчно е да има сертифициране на полета и айакс, който да виспондва правилно само за формата.

 

[Pok4]

Нарочно бях пуснал тема тук, в този раздел, тъй като сега ще споделя малко код, как точно направих екстеншъна за аргос - https://web-tourist.net/threads/argos-multigaming-cms.131376/page-4#post-678638

Той работи както вече знаете с Localstorage, правен е с функции от урок намерен в нета... Дали ще ползвате функцията - зависи от вас, кода може да се съкрати доста, но с функцията имате възможност да сетвате време и да триете автоматично стари записи от локал сториджа...

Ето и код:

Функциите:

      const local_storage_expire = 1800000; //def:30 min, 15000 - 15 seconds, 150000 - 2.5 minutes - after how much time (milliseconds) we remove old storage in local storage (old text for textareas)
      function setWithExpiry(key, value, ttl) {
            const now = new Date()
            const item = {
                value: value,
                expiry: now.getTime() + ttl,
            }
            localStorage.setItem(key, JSON.stringify(item));
      }
      
      function getWithExpiry(key) {
            const itemStr = localStorage.getItem(key)
            if (!itemStr) {
                return null
            }
            const item = JSON.parse(itemStr)
            const now = new Date()
            // compare the expiry time of the item with the current time
            if (now.getTime() > item.expiry) {
                // If the item is expired, delete the item from storage
                // and return null
                localStorage.removeItem(key)
                return null
            }
            return item.value
     }

И сега си биндвате евентите keyup и paste, за да знаете кога юзъра ги ползва и съответно в реално време запазвате текста в локал сториджа:

     /*For contact form*/
     if($("textarea[name=your-text]").length > 0){
        $("textarea[name=your-text]").on("paste", function(e) {
          setWithExpiry("textarea_contact", $("textarea[name=your-text]").val(),local_storage_expire);
        });

        $("textarea[name=your-text]").on("keyup", function(e) {
          setWithExpiry("textarea_contact", $("textarea[name=your-text]").val(),local_storage_expire);
        });
      
        if(getWithExpiry("textarea_contact")) {
          $("textarea[name=your-text]").val(getWithExpiry("textarea_contact"));
        }
     }

Какво прави по-горния код ?
1.Проверява дали текстареата я има
2. биндва евент paste (за да засече кога пействате код в текстареата)
3.Сетва айдито на локал сториджа - id: textarea_contact, след това се взима стойноста с val() от текстареата и накрая е времето, което е зададено в милисекунди и се намира най-горе над функциите (може да си го зададете и като число директно вместо да слагате променливата)

Втория код прави същото, но за keyup евента, тоест когато пишете в текстареата...

Накрая има проверка дали съществува такъв запис и ако има задава стойност с val().

В линка, който дадох може да видите и клип с демо. Ако има въпроси - на разположение съм

 

[Pok4]

Ако се чудите колко милисекунди да въведете, ползвайте гугъл търсачката и напишете примерно: 30 minutes in milliseconds и автоматично ще ви сметне какво да въведете.
Ако искате сменете 30 minutes с 1 hour (примерно) - 3600000 (milliseconds)

 

[Blinky]

Super. Дай нещо лайв, имаш ли. Да погледаме конзолата.

 

[Pok4]

Да му се не видяло, няма безплатен хост с php 8.1 поддръжка. Има 1,но иска данни от дебитна карта с валидност поне 10/23...иначе на драго сърце. С онзи стария не искам да имам общо, пълна скръб...
Урока е този - https://www.sohamkamani.com/blog/javascript-localstorage-with-ttl-expiry/

Тук има микс между чист js и jquery. Може да се направи и с vanilla js.
Но аз съм си свикнал с jquery и съм плътно стикнат до него.

 

[Blinky]

Някакъв хост за 2-3 евро на месец ще е достатъчен да ръчкаш в реална среда. Ти какво на локал хоста си го вдигнал с всичкото си му база и всичко нужно. Ако ще го селкаш що не го пуснеш онлайн с демо акаунт. Виж https://www.heroku.com/ - мисля, че ще може да ти отговори на изискванията.

 

[Pok4]

Аз бих дал линк от локалния хост, но съм с WiFi и ще трябва да се пипат настройки по рутера. Имаше в github 1 туул, дето го пускаш през cmd и ти дава custom link и стават нещата, но не помня как се казваше. Всичко се сервира през туула. Май започвашe с g.
Лошото е, че при затваряне и пускане линка се сменя. Имаше и платено с вечни линкове.
2-3 Евро не са проблем, но повечето искат за 1 г. да се плати и цената вече е друга. Ако се съберат поне 2 купувачи ще взема хост от някъде.
Тук в Испания за 60 Евро 3-ма ядат на корем за 1 седмица.

 

[Blinky]

Да, това е ясно, то и тук не са малко тия пари, но това са сметки, които си правят хора с оскъдни месечни бюджети. Мисля, че девовете не влизат в тази група. А и това е по-скоро не нещо похарчено и изядено, а инвестиция, която в един момент става актив. Дадох и фри опция. А ако не, ще измислим нещо, а ми кажи какво ти е нужно точно да ти се събере системата - сторидж, рам, среда.

 

[Pok4]

Ами системката с вендор папката е 12 мб в архив.
Htdocs папката е ~50 mb заедно с форума и системата (вече разархивирани)

PHP 8.1
Mysql - на локалния хост съм с MariaDB 10.4.22
Възможност за създаване на поне 1 датабаза (в нея ще е всичко - дб на форума и на аргос)

За друго не се сещам, принципно phpfastcache работи с файлове, но има възможност за redis/memcached и т.н. Но аз съм го настройл да работи с файлове по-начало (записват се в cache/ папката)
Общо взето за това е, друго не се сещам.

Сторидж, рам - колкото има, все ще тръгнат, щом на лаптопа върви

Снощи попаднах на тези - https://hubuhost.com/, но сега търся фрий домейн, който да дава и dns данни, защото тези пък нямат безплатни домейни. В панела съм вече и има всичко нужно...

 

[Pok4]

Хора, намерих и домейн- https://www.noip.com/ - дават NS записи - https://www.noip.com/support/knowledgebase/how-to-setup-plus-managed-dns/

Всичко настроих, сега чакам 24-48 часа, да се обнови и ще видим какво ще стане

 

[Blinky]

Хора, намерих и домейн- https://www.noip.com/ - дават NS записи - https://www.noip.com/support/knowledgebase/how-to-setup-plus-managed-dns/

Всичко настроих, сега чакам 24-48 часа, да се обнови и ще видим какво ще стане

Да, пиши, ако нещо да ти пусна аз. Имам един риселър план. Мога да ти отделя някакво местенце, ако решиш.