Hogyan tároljuk az adatokat a böngésző tárolójában - localStorage and sessionStorage Explained

A webalkalmazás által kezelt adatok kezeléséhez nem feltétlenül szükséges adatbázis. A megfelelő böngészőtárolási funkciókat támogatja a Chrome (4-es és újabb verzió), a Mozilla Firefox (3,5-es és újabb verzió) és az Internet Explorer (8-as és újabb verzió), valamint számos más böngésző, beleértve az iOS és az Android böngészőit is.

A böngésző tárolásának két fő lehetősége van: localStorage és sessionStorage.

helyi raktár

Az localStorageobjektumra mentett minden tartalom / adat a böngésző újraindítását (bezárását és újbóli megnyitását) követően lesz elérhető. Annak érdekében, hogy egy elem mentéséhez , hogy localStorageakkor használja a módszert setItem(). Ehhez a módszerhez kulcsot és értéket kell átadni.

Example: localStorage.setItem("mykey","myvalue");

Az elem letöltéséhez a localStorage -ból a módszert getItemkell használni. A getItemmetódusnak át kell adnia a lekérni kívánt adatok kulcsát:

 Example: localStorage.getItem("mykey");

A módszer localStoragehasználatával eltávolíthat egy elemet removeItem(). Ezt a módszert kell átadni az eltávolítandó elem kulcsának:

 Example: localStorage.removeItem("mykey");

Az egész törléséhez localStoragehasználja clear()az localStorageobjektumon a módszert :

 Example: localStorage.clear();

sessionStorage

Az sessionStorageobjektumba mentett elemek addig maradnak, amíg a felhasználó nem zárja be a böngészőt. Ezután a tároló törlődik.

Elmenthet egy elemet ide: sessionStoragekérem, használja setItem()az sessionStorageobjektumon található módszert :

Example: sessionStorage.setItem("mykey","myvalue");

Az elem lekéréséhez a sessionStorage alkalmazásból a módszert getItemkell használni. A getItemmetódusnak át kell adnia a lekérni kívánt adatok kulcsát:

 Example: sessionStorage.getItem("mykey");

A módszer sessionStoragehasználatával eltávolíthat egy elemet removeItem(). Ezt a módszert kell átadni az eltávolítandó elem kulcsának:

 Example: sessionStorage.removeItem("mykey");

Az egész törléséhez sessionStoragehasználja clear()az sessionStorageobjektumon a módszert :

 Example: sessionStorage.clear();

Tömbök mentése a localStorage és a sessionStorage szolgáltatásba

Nem csak egyetlen értéket menthet a localStorageés-be sessionStorage, hanem elmentheti egy tömb tartalmát is.

Ebben a példában van egy tömb számokkal:

var ourArray =[1,2,3,4,5];

Most már mentse el localStorage, vagy sessionStoragehasználja a setItem()módszer:

localStorage.setItem("ourarraykey",JSON.stringify(ourArray));

vagy sessionStorage:

sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray));

A mentéshez a tömböt először stringekké kell átalakítani. A fenti példában ezt a JSON.stringifymódszert alkalmazzuk.

Amikor lekérjük adatainkat a localStoragevagy sessionStoragefájlból, alakítsa vissza tömbökké:

var storedArray = localStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);

vagy sessionStorage:

var storedArray = sessionStorage.getItem("ourarraykey"); ourArray = JSON.parse(storedArray);