Get best of the week

Web Storage API-Fallstudien



Guten Tag, Freunde!

In diesem Artikel werden einige Beispiele für die Verwendung der Web Storage-API oder des Storage-Objekts vorgestellt.

Was genau machen wir jetzt?

  • Lernen Sie, sich an die Videowiedergabezeit zu erinnern.
  • Wir arbeiten mit dem Anmeldeformular für die Seite.
  • Schreiben wir die Logik der Aufgabenliste.
  • Wir implementieren Chat.
  • Skizzieren Sie einen Warenkorb für Waren.

So lass uns gehen.

Kurze Review


Das Speicherobjekt wird zum Speichern von Daten auf der Clientseite verwendet und fungiert in diesem Sinne als Alternative zu Cookies. Der Vorteil von Storage ist die Speichergröße (ab 5 MB hängt es vom Browser ab, wenn das Limit überschritten wird, wird der Fehler "QUOTA_EXCEEDED_ERR" ausgegeben) und es besteht keine Notwendigkeit, auf den Server zuzugreifen. Ein wesentlicher Nachteil ist die Sicherheit: Der Zugriff auf die Seite kostet ein schädliches Skript, und das Schreiben geht verloren. Es wird daher dringend davon abgeraten, vertrauliche Informationen im Speicher zu speichern.

Der Fairness halber ist es erwähnenswert, dass es heute mehr fortschrittlichen Lösungen für die Speicherung von Daten auf der Client - Seite sind - das ist IndexedDB, Dienstleister + Cache API usw.

Sie über Service - Mitarbeiter lesen hier .

Die Web Storage-API enthält localStorage und sessionStorage. Der Unterschied zwischen ihnen ist die Datenspeicherzeit. In localStorage werden Daten dauerhaft gespeichert, bis sie "explizit" gelöscht werden (weder das erneute Laden der Seite noch das Schließen führt zum Löschen von Daten). Die Datenspeicherzeit in sessionStorage wird, wie der Name schon sagt, durch die Browsersitzung begrenzt. Da sessionStorage in der Praxis fast nie verwendet wird, werden wir nur localStorage berücksichtigen.

Was müssen Sie über localStorage wissen?


  • Bei Verwendung von localStorage wird eine Darstellung des Speicherobjekts erstellt.
  • Daten in localStorage werden als Schlüssel / Wert-Paare gespeichert.
  • Daten werden als Zeichenfolgen gespeichert.
  • Die Daten werden nicht sortiert, was manchmal zu ihrer Vermischung führt (wie wir am Beispiel der Aufgabenliste sehen werden).
  • Wenn Sie den Inkognito-Modus oder den privaten Modus in Ihrem Browser aktivieren, wird die Verwendung von localStorage möglicherweise unmöglich (browserabhängig).

localStorage verfügt über die folgenden Methoden:

  • Storage.key (n) - Schlüsselname mit Index n
  • Storage.getItem () - holt den Gegenstand
  • Storage.setItem () - Schreiben Sie ein Element
  • Storage.removeItem () - Löscht ein Element
  • Storage.clear () - Speicher löschen
  • Speicherlänge - Speicherlänge (Anzahl der Elemente - Schlüssel / Wert-Paare)

In der Spezifikation sieht es so aus:

interface Storage {
    readonly attribute unsigned long length;
    DOMString? key(unsigned long index);
    getter DOMString? getItem(DOMString key);
    setter void setItem(DOMString key, DOMString value);
    deleter void removeItem(DOMString key);
    void clear();
};

Daten werden auf eine der folgenden Arten in den Speicher geschrieben:

localStorage.color = 'deepskyblue'
localStorage[color] = 'deepskyblue'
localStorage.setItem('color', 'deepskyblue') //

Sie können die Daten wie folgt erhalten:

localStorage.getItem('color')
localStorage['color']

Wie iteriere ich über Speicherschlüssel und erhalte Werte?


//  1
for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i)
    console.log(`${key}: ${localStorage.getItem(key)}`)
}

//  2
let keys = Object.keys(localStorage)
for (let key of keys) {
    console.log(`${key}: ${localStorage.getItem(key)}`)
}

Wie oben erwähnt, haben die Daten im Speicher ein Zeichenfolgenformat, sodass beim Schreiben von Objekten einige Schwierigkeiten auftreten, die mit dem Tandem JSON.stringify () - JSON.parse () leicht gelöst werden können:

localStorage.user = {
    name: 'Harry'
}
console.dir(localStorage.user) // [object Object]

localStorage.user = JSON.stringify({
    name: 'Harry'
})
let user = JSON.parse(localStorage.user)
console.dir(user.name) // Harry

Für die Interaktion mit localStorage gibt es ein spezielles Ereignis - den Speicher (onstorage), der beim Schreiben / Löschen von Daten auftritt. Es hat die folgenden Eigenschaften:

  • Schlüssel - Schlüssel
  • oldValue - alter Wert
  • newValue - neuer Wert
  • URL - Speicheradresse
  • storageArea - das Objekt, in dem die Änderung stattgefunden hat

In der Spezifikation sieht es so aus:

[Constructor(DOMString type, optional StorageEventInit eventInitDict)]
    interface StorageEvent : Event {
    readonly attribute DOMString? key;
    readonly attribute DOMString? oldValue;
    readonly attribute DOMString? newValue;
    readonly attribute DOMString url;
    readonly attribute Storage? storageArea;
};

dictionary StorageEventInit : EventInit {
    DOMString? key;
    DOMString? oldValue;
    DOMString? newValue;
    DOMString url;
    Storage? storageArea;
};

Ermöglicht localStorage Prototyping?


Storage.prototype.removeItems = function() {
    for (item in arguments) {
        this.removeItem(arguments[item])
    }
}

localStorage.setItem('first', 'some value')
localStorage.setItem('second', 'some value')

localStorage.removeItems('first', 'second')

console.log(localStorage.length) // 0

Wie überprüfe ich in localStorage nach Daten?


//  1
localStorage.setItem('name', 'Harry')

function isExist(name) {
    return (!!localStorage[name])
}

isExist('name') // true

//  2
function isItemExist(name) {
    return (name in localStorage)
}

isItemExist('name') // true

Den localStorage-Browser finden Sie hier:



Genug Worte, es ist Zeit , sich an die Arbeit zu machen.

Beispiele für die Verwendung


Denken Sie an die Videowiedergabezeit


window.onload = () => {
    //   <video>
    let video = document.querySelector('video')
    
    //  localStorage   currentTime ( ),    video.currentTime
    if(localStorage.currentTime) {
        video.currentTime = localStorage.currentTime
    }
    
    //    video.currentTime,     localStorage.currentTime
    video.addEventListener('timeupdate', () => localStorage.currentTime = video.currentTime)
}

Das Ergebnis sieht folgendermaßen aus:



Starten Sie das Video und beenden Sie beispielsweise die Wiedergabe in der dritten Sekunde. Die Zeit, die wir aufgehört haben, wird in localStorage gespeichert. Um dies zu überprüfen, laden Sie die Seite neu oder schließen / öffnen Sie sie. Wir sehen, dass die aktuelle Videowiedergabezeit gleich bleibt.

Codepen

Github

Wir arbeiten mit dem Anmeldeformular


Das Markup sieht folgendermaßen aus:

<form>
    Login: <input type="text">
    Password: <input type="text">
    <input type="submit">
</form>

Wir haben ein Formular und drei "Eingaben". Für das Passwort verwenden wir <input type = "text">. Wenn Sie den richtigen Typ (Passwort) verwenden, versucht Chrome, die eingegebenen Daten zu speichern, wodurch wir unsere eigenen Funktionen nicht implementieren können.

JavaScript:

//         
let form = document.querySelector('form')
let login = document.querySelector('input')
let password = document.querySelector('input + input')

//  localStorage  
//     
//    
if (localStorage.length != 0) {
    login.value = localStorage.login
    password.value = localStorage.password
}

//      "submit"
form.addEventListener('submit', () => {
    //      localStorage
    localStorage.login = login.value
    localStorage.password = password.value
    
    //    hello  world     , 
    //       "welcome"  
    if (login.value == 'hello' && password.value == 'world') {
        document.write('welcome')
    }
})

Bitte beachten Sie, dass wir das Formular nicht "validieren". Auf diese Weise können Sie insbesondere Leerzeilen als Benutzernamen und Passwort aufzeichnen.

Das Ergebnis sieht so aus:



Wir führen magische Wörter ein.



Daten werden in localStorage geschrieben und eine Begrüßung wird auf der Seite angezeigt.

Codepen

Github

Schreiben der Logik der Aufgabenliste


Das Markup sieht folgendermaßen aus:

<input type="text"><button class="add">add task</button><button class="clear">clear storage</button>

<ul></ul>

Wir haben eine „Eingabe“ zum Eingeben einer Aufgabe, eine Schaltfläche zum Hinzufügen einer Aufgabe zur Liste, eine Schaltfläche zum Bereinigen der Liste und des Speichers sowie einen Container für die Liste.

JavaScript:

//      
let input = document.querySelector('input')
input.focus()
//       
let addButton = document.querySelector('.add')
//    
let list = document.querySelector('ul')

//   localStorage  
if (localStorage.length != 0) {
    //     /
    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i)
        //   -  
        let template = `${localStorage.getItem(key)}`
        //    
        list.insertAdjacentHTML('afterbegin', template)
    }
    
    //      "close" -    
    document.querySelectorAll('.close').forEach(b => {
        //   
        b.addEventListener('click', e => {
            //    "li"
            let item = e.target.parentElement
            //    
            list.removeChild(item)
            //    localStorage
            localStorage.removeItem(`${item.dataset.id}`)
        })
    })
}

//       "Enter"
window.addEventListener('keydown', e => {
    if (e.keyCode == 13) addButton.click()
})

//           ""
addButton.addEventListener('click', () => {
    //   - 
    let text = input.value
    //  ,          "data-id"
    let template = `<li data-id="${++localStorage.length}"><button class="close">V</button><time>${new Date().toLocaleDateString()}</time> <p>${text}</p></li>`
    //   -   
    list.insertAdjacentHTML('afterbegin', template)
    //    localStorage
    localStorage.setItem(`${++localStorage.length}`, template)
    //   
    input.value = ''

    //           ""
    document.querySelector('.close').addEventListener('click', e => {
        //    -   
        let item = e.target.parentElement
        //    
        list.removeChild(item)
        //    localStorage
        localStorage.removeItem(`${item.dataset.id}`)
    })
})

//        ""
document.querySelector('.clear').onclick = () => {
    //  
    localStorage.clear()
    //    
    document.querySelectorAll('li').forEach(item => list.removeChild(item))
    //   
    input.focus()
}

Das Ergebnis sieht folgendermaßen aus:



Der Liste hinzugefügte Aufgaben werden in localStorage als vorgefertigtes Markup gespeichert. Wenn die Seite neu geladen wird, wird die Liste aus den Daten des Speichers gebildet (es wird gemischt, was oben erwähnt wurde).



Durch Entfernen einer Aufgabe aus der Liste durch Klicken auf das grüne Häkchen wird das entsprechende Schlüssel / Wert-Paar aus dem Repository entfernt.

Codepen

Github

Chat-Implementierung


Das Markup sieht folgendermaßen aus:

<input type="text">
<button class="send">send message</button>
<button class="save">save chat</button>
<button class="clear">clear chat</button>

<div></div>

Wir haben eine Eingabe zum Eingeben einer Nachricht, drei Schaltflächen: zum Senden einer Nachricht, zum Speichern von Korrespondenz und zum Reinigen von Chat und Speicher sowie einen Container für Nachrichten.

JavaScript:

//      
let input = document.querySelector('input')
input.focus()

//  
let sendButton = document.querySelector('.send')
let saveButton = document.querySelector('.save')
let clearButton = document.querySelector('.clear')

//  
let box = document.querySelector('div')

//      "messages"
if (localStorage.messages) {
    //  
    localStorage.messages
        .split('</p>,')
        .map(p => box.insertAdjacentHTML('beforeend', p))
}

//   
sendButton.addEventListener('click', () => {
    //   
    let text = document.querySelector('input').value
    //  
    let template = `<p><time>${new Date().toLocaleTimeString()}</time> ${text}</p>`
    //    
    box.insertAdjacentHTML('afterbegin', template)
    //   
    input.value = ''
    //    
    localStorage.message = template
})

//       "Enter"
window.addEventListener('keydown', e => {
    if (e.keyCode == 13) sendButton.click()
})

//   "storage"
window.addEventListener('storage', event => {
    //     "messages"
    //  
    if (event.key == 'messages') return
    //      null
    //     
    //     
    event.newValue == null ? clearButton.click() : box.insertAdjacentHTML('afterbegin', event.newValue)
})

//  
saveButton.addEventListener('click', () => {
    //  
    let messages = []
    //  
    document.querySelectorAll('p').forEach(p => messages.push(p.outerHTML))
    //    
    localStorage.messages = messages
})

//    
clearButton.addEventListener('click', () => {
    localStorage.clear()
    document.querySelectorAll('p').forEach(p => box.removeChild(p))
    input.focus()
})

Das Ergebnis sieht folgendermaßen aus: Die



gesendete Nachricht wird in localStorage.message geschrieben. Mit dem Ereignis "Speicher" können Sie den Nachrichtenaustausch zwischen Browser-Registerkarten organisieren.



Wenn ein Chat gespeichert wird, werden alle Nachrichten in localStorage.messages geschrieben. Wenn die Seite neu geladen wird, wird aus den aufgezeichneten Nachrichten eine Korrespondenz gebildet.

Codepen

Github

Einkaufskorb Layout


Wir wollen keinen voll funktionsfähigen Korb erstellen, daher wird der Code "im alten Stil" geschrieben.

Das Layout eines Produkts sieht folgendermaßen aus:

<div class="item">
    <h3 class="title">Item1</h3>
    <img src="http://placeimg.com/150/200/tech" alt="#">
    <p>Price: <span class="price">1000</span></p>
    <button class="add" data-id="1">Buy</button>
</div>

Wir haben einen Container für die Ware, den Namen, das Bild und den Preis der Ware sowie eine Schaltfläche zum Hinzufügen von Waren zum Warenkorb.

Wir haben auch einen Behälter für Schaltflächen, um den Inhalt des Korbs anzuzeigen und den Korb und die Lagerung zu leeren, sowie einen Behälter für den Korb.

<div class="buttons">
    <button id="open">Cart</button>
    <button id="clear">Clear</button>
</div>
<div id="content"></div>

JavaScript:

//    
let itemBox = document.querySelectorAll('.item'),
    cart = document.getElementById('content');

//    localStorage
function getCartData() {
    return JSON.parse(localStorage.getItem('cart'));
}

//    
function setCartData(o) {
    localStorage.setItem('cart', JSON.stringify(o));
}

//    
function addToCart() {
    //       
    this.disabled = true;
    //        ,   
    let cartData = getCartData() || {},
        //    "Buy"
        parentBox = this.parentNode,
        // id 
        itemId = this.getAttribute('data-id'),
        //  
        itemTitle = parentBox.querySelector('.title').innerHTML,
        //  
        itemPrice = parentBox.querySelector('.price').innerHTML;
    // +1  
    if (cartData.hasOwnProperty(itemId)) {
        cartData[itemId][2] += 1;
    } else {
        // + 
        cartData[itemId] = [itemTitle, itemPrice, 1];
    }
    //    localStorage
    if (!setCartData(cartData)) {
        //   
        this.disabled = false;
    }
}

//    ""    "Buy"
for (let i = 0; i < itemBox.length; i++) {
    itemBox[i].querySelector('.add').addEventListener('click', addToCart)
}

//  
function openCart() {
    //    
    let cartData = getCartData(),
        totalItems = '',
        totalGoods = 0,
        totalPrice = 0;
    //    
    if (cartData !== null) {
        totalItems = '<table><tr><th>Name</th><th>Price</th><th>Amount</th></tr>';
        for (let items in cartData) {
            totalItems += '<tr>';
            for (let i = 0; i < cartData[items].length; i++) {
                totalItems += '<td>' + cartData[items][i] + '</td>';
            }
            totalItems += '</tr>';
            totalGoods += cartData[items][2];
            totalPrice += cartData[items][1] * cartData[items][2];
        }
        totalItems += '</table>';
        cart.innerHTML = totalItems;
        cart.append(document.createElement('p').innerHTML = 'Goods: ' + totalGoods + '. Price: ' + totalPrice);
    } else {
        //    
        cart.innerHTML = 'empty';
    }
}
//  
document.getElementById('open').addEventListener('click', openCart);

//  
document.getElementById('clear').addEventListener('click', () => {
    localStorage.removeItem('cart');
    cart.innerHTML = 'leared';
});

Das Ergebnis sieht folgendermaßen aus:



Ausgewählte Produkte werden im Geschäft als einzelnes Schlüssel / Wert-Paar erfasst.



Wenn Sie auf die Schaltfläche Warenkorb klicken, werden Daten von localStorage in einer Tabelle angezeigt, die Gesamtzahl der Waren und deren Wert werden berechnet.

Codepen

Github

Vielen Dank für Ihre Aufmerksamkeit.

More articles:


All Articles