A helyi tárolás használatát javascript
Egy egyszerű megoldás erre a problémára - a helyi tárolás használatát (Local Storage). Helyi tárolás lehetővé teszi, hogy tárolja az adatokat a felhasználó gépére, és könnyen lehet letölteni egy listát tőle után az oldal frissül. Ebben a cikkben, akkor írj egy kis todo-lista a helyi tárolására.
Mi a helyi tárolást?
Helyi repository ( „Web adattár”) eredetileg része a HTML5 specifikációt, de most költözött szét. Tárolja az adatokat két módja van:
- Helyi tárolás. tartós tárolása, ami mi fogjuk használni.
- Session Storage. üzletek adatai közül csak az ülés, amikor a felhasználó bezárja az oldalt, az adatok elvesznek.
Helyi tárolás lehetővé teszi, hogy tárolja az adatokat a felhasználó számítógépén formájában kulcsértékpárokat, és ezek az adatok is elérhetők lesznek, miután a böngésző bezárásakor, vagy kapcsolja ki a számítógépet.
Ahhoz, hogy hozzon létre egy todo lista, szükségünk van:
- Text input elem bevitelére tartalmát.
- hozzátéve kulcseleme a listában.
- gombot, hogy törölje a listát.
- Magát a listát (
- ).
- És egy extra div megjelenítéséhez hibákat.
Így HTML-kód így fog kinézni:
mert Az általunk használt jQuery kell csatlakoztatni.
Először meg kell követni a kattintásokat a Hozzáadás gombra, és ellenőrizze, hogy a beviteli mező nem üres:
Ez a kód ellenőrzi az érték a szöveg input'a és ha üres - mutat egy hiba, és visszatér hamis, hogy a fennmaradó része a kód nem teljesül, és az elem nem kerül be a listába.
Következő hozzá kell adnunk az ügyet a listán. Fogjuk használni a betoldott módszer, így példány kerül majd a lista tetején. A teljes lista tárolása a helyi boltban:
Ahhoz, hogy működjenek együtt a helyi tárolásra van szükség, hogy egy kulcsot és annak megfelelő érték. A mi esetünkben, hívunk meg a gombot „todos”, és az értéke lesz, a HTML kód, listában szereplő (a tag
- ). Ez a kód könnyen nyert segítségével jQuery. Végül vissza hamis, hogy megakadályozzák benyújtása az űrlapot, és újratölti az oldalt.
- Interaktív feltöltési fájlok HTML5 és jQuery
- Doing audiolejátszó jQuery és jPlayer
- Gombok létrehozása beépített folyamat jelző
- A választott szín a képen a HTML5 Canvas
- Create Image Slider jQuery és CSS3
- Digitális óra jQuery és CSS3
- Könyvjelzők tiszta CSS3
- Effects animáció letöltés CSS
A következő lépés - ellenőrizze a helyi boltban, ha van egy érték a kulcs „todos”, akkor töltse le a listát a helyi boltban:
mert tároljuk a kész HTML tárolni, csak írja be ezt a kódot a listából.
A todo-lista már majdnem kész, már csak azt kell megvalósítani lista tisztítási funkció. Amikor a felhasználó rákattint a gombra, majd töröljük az egész listát, és a helyi tároló törlődik:
Kész! A teljes kód így néz ki:
böngésző támogatása
A webáruház által támogatott összes főbb böngészők még IE8. A félelem csak IE7 alatt.
következtetés
Helyi tárolás olyan kis alkalmazások is kiváló csere az adatbázisban. Tárolása kis mennyiségű adatot nem okozhat nehézséget.