Hogyan kell használni a helyi tárolás javascript

Készítsen saját alkalmazás az esetek listáját menetrend - ez valószínűleg az egyik első olyan alkalmazás fejlesztők kezdik tanulni j # 097; vascript. És a probléma ezeknek az alkalmazásoknak, hogy amikor frissíti az oldalt, az összes lista eltűnik.

Van egy viszonylag egyszerű megoldás, amely a helyi tárolás használatát. Helyi tárolás egy jó tulajdonsága, hogy képes tárolni az információt a felhasználó merevlemezén, így amikor frissíti az oldalt a listán az ütemezett feladatok, minden marad a helyén.

Mi a Helyi tároló?

kép forrása

Helyi tárolás (helyi tárolás) - része egy webáruház, amely része a HTML5 specifikáció. A specifikáció két tárolási:

* A helyi tárolás: lehetővé teszi, hogy tárolja az adatokat anélkül, hogy a lejárati idő, és ez az, amit mi fogja használni ma, mert meg kell, hogy a lista a tervezett feladatok az oldalon maradni, ameddig csak lehetséges.
* Session Storage: elmenti az adatokat csak egy session. Tehát, ha a felhasználó bezárja a lapot, majd újra megnyitja - minden adat elvész.

Egyszerűen fogalmazva, minden, ami a webes tárolás, ez tartja a helyi kulcsértékpárokat nevével, és ellentétben a cookie-k vannak, ezek az adatok is megmaradnak, ha a böngésző bezárásakor, vagy kapcsolja ki a számítógépet.

Amikor a lista ütemezett esetben szükségünk lesz:

* Beviteli mező a feladat nevét
* Beviteli gombot, hogy a feladatok listáját
* Gomb tisztítsa meg a tervezett feladatok
* Egy lista, amely kerül probléma
* Div megjelenítéséhez figyelmeztetést arra törekedjünk, hogy egy üres feladatlistát.

Így a html-kód a következő lesz:

Itt van egy viszonylag egyszerű HTML, amit majd közzé a dinamikus tartalmat j # 097; vascript.

Mivel ebben a példában a jQuery, akkor tartalmaznia kell ezt a könyvtárat a HTML-dokumentum.

Mivel mi már a fejlődő egy egyszerű alkalmazás, a lista ütemezett feladatok, itt az első dolog, amit meg kell gondolni, hogy utolérjék a pillanat a gomb megnyomása hozzá egy feladat, és hogy a csekk nem üres, ha az űrlap ebben a pillanatban:

Itt megnézzük a gomb megnyomása és futtatni egy egyszerű tesztet, hogy a felhasználó töltötte be a szükséges formanyomtatványokat. Ha nem, akkor van egy div figyelmeztetést és tovább hivatkozva 1000ms, majd eltűnik. Végül vissza hamis, és így a böngésző nem olvassa el a többi a forgatókönyvet, és nem növeli a listához.

A következő dolog, amit tennie kell, hogy egy lista elem a megadott értéket a beviteli mezőben. Ez akkor fordul elő, amikor a felhasználó belép az összes szükséges adat és egy gombra kattint - minden új feladatot kap, hogy a tetején a listán, és a tárolt adatok helyi tárolására az alábbiak szerint:

Mint látható, ez használ a jQuery meglehetősen szabványos, és amikor a helyi tároló, meg kell menteni a kulcs és az érték. Kulcs - a név, amit azonosítottak, és ebben az esetben ez todos ". Ezután meg kell adnia, hogy mi fog menteni, és ebben az esetben - ez a teljes HTML, amelyek belsejében elhelyezett rendezetlen lista „todos”. Mint látható, csak ki az adatokat a jQuery, és a visszatérési érték hamis, hogy a forma nem indult a visszaigazoló oldalt, és újraindul.

A következő lépés az, hogy megvizsgáljuk, vajon valami már tárolva van a helyi tárolás számítógépen, és ha igen, meg kell jeleníteni az adatokat az oldalon. Tehát, ahogy mi kértük a kulcs todos nevét, meg kell, hogy ellenőrizze annak elérhetőségét a következő:

Annak tesztelésére, azt az egyszerű kifejezést akkor, és akkor megkapjuk azt, amit tárolt helyi tároló, és helyezze el az adatokat egy HTML rendezetlen lista a tervezett feladatokat.

Ha a teszt a mi kis app, töltse be újra az oldalt, látni fogja, hogy ez már működik, és minden mi maradt meg az, hogy létrehozunk egy függvényt az esetben, ha a felhasználó úgy dönt, hogy törölje az összes formákat. Amikor ez megtörténik, meg kell, hogy törölje az összes tartalmát a helyi tároló, és újratölti az oldalt, hogy a változások érvénybe, akkor visszatérünk a hamis, hogy megakadályozzák a megjelenését a # jel elején URL.

Ezzel befejeződött a fejlesztés a kicsi, de nagyon hasznos alkalmazás. A teljes kód a következő:

Support Webtároló elég jó. Ezt támasztja alá az összes modern böngésző, ideértve akár IE8. Problémák merülhetnek fel, kivéve IE7, ha még meg kell csinálni ezzel a verzióval.

Helyi tárolás kis alkalmazásokat lehet egy nagyon hasznos funkció. Mi mást kell tárolni kis mennyiségű adatot?