LocalStorage: Clearing the clutter...

The two great tools for saving key/value pairs locally are local storage and session storage. Today we will look into the theory and practical code and make it simplified enough for everyone to understand.
1. Understanding localStorage vs sessionStorage
  • SessionStorage, the data, is persisted only until the window or tab is closed.
  • LocalStorage, the data is persisted until the user manually clears the browser cache or until your web app clears the data
    • 2. Creating, Reading, and Updating Entries
    Create entries for the localStorage object by using the setItem() method.
    let key = 'Item 1';
localStorage.setItem(key, 'Value');
    To read entries, use the getItem()
    let myItem = localStorage.getItem(key);
    Updating an entry is done with the setItem()
    localStorage.setItem(key, 'New Value');
    3. Deleting and Clearing Entries
    Delete an entry with the the removeItem() method
    localStorage.removeItem(key);
    To clear everything that’s stored in localStorage, can be done with the clear() method
    localStorage.clear();
    4. Storing Non-String values with JSON
    LocalStorage can only store string values. If you want to store objects or arrays as values in localStorage, you can use JSON.stringify() to convert them into strings.
    let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));
    Although myObj is an object, JSON.stringify(myObj) converts it into a string. So myObj is now a valid localStorage value.
    To read and return stringified values, use the JSON.parse() method. The JSON.parse() method takes JSON strings and converts them into JavaScript objects.
    let item = JSON.parse(localStorage.getItem(key));
    5. Checking for Items
    Like to test for the presence of items in the localStorage. You can use if statements to check if localStorage is holding items or if it is empty.
    if (localStorage.length > 0) {
  // ...
}
    6. Iterating Over Items
    The localStorage and sessionStorage objects don’t support the forEach method. To iterate over the items in localStorage, use a for loop
    for (let i = 0; i < localStorage.length; i++){
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(`Key: ${key} | Value: ${value}`);
}
    7. Checking for Support
    You can test for localStorage support by checking if it’s available on the window object using an if statement:
    if (window.localStorage) {
  // localStorage supported
}
    Conclusion
    We can use the localStorage or sessionStorage objects to store key/value pairs. There are methods that enable you to interact with the items within localStorage. With this tutorial, you created, removed, and updated entries within localStorage. You also converted array and object data into strings and back using JSON methods.
    At times, it may be best to use cookies instead of localStorage or session.

    17

    Tags:

    Webdev

    This website collects cookies to deliver better user experience

    LocalStorage: Clearing the clutter...