19 Matching Annotations
  1. Jun 2021
    1. That means if an attacker can inject some JavaScript code that runs on the web app’s domain, they can steal all the data in localStorage. The same is true for any third-party JavaScript libraries used by the web app. Indeed, any sensitive data stored in localStorage can be compromised by JavaScript. In particular, if an attacker is able to snag an API token, then they can access the API masquerading as an authenticated user.
    2. But there’s a drawback that I didn’t like about this option: localStorage is vulnerable to Cross-site Scripting (XSS) attacks.
    3. So here’s the question: Where do you store the token in the browser so that the token survives browser reloads? The off-the-cuff answer is localStorage because it’s simple and effective:
  2. Feb 2021
    1. try { const value = await localforage.getItem('somekey'); // This code runs once the value has been loaded // from the offline store. console.log(value); } catch (err) { // This code runs if there were any errors. console.log(err); }

      This looks like the best approach for me. async/await

  3. Dec 2020
    1. React will update state throughout the user’s session. localStorage won’t change.When the user ends their session, save whatever the state is at that time to localStorage, making it available for hydrating in the next session.

      Is this safe/reliable to defer saving until then? What if browser crashes? I guess that's why onbeforeunload is needed. Hopefully onbeforeunload is reliable and can't be skipped (unless browser crashes?).

    2. So rather than continuously keeping localStorage in-sync with React state, let’s simply save state to localStorage whenever the user ends their session, either by leaving the app (‘unmounting’ the component) or refreshing the page.
    3. Because localStorage can only store strings, arrays and objects need to be passed into JSON.stringify() before being passed to setItem().
    4. Saving form data across sessions — what do people hate more than filling out a form? Filling out a form twice!
    5. Experiment with different states while developing — When working on an app, it’s often useful or necessary for the app to have a certain state to be able to work on particular styling and functionality, (e.g. styling a list of items and removing items requires items). Rather than recreating an app’s state on every refresh, Local Storage can persist that state, making development much more efficient and enjoyable.
    6. A simple, fake backend for your frontend React projects — It’s often nice to add the appearance of a backend/database to your frontend portfolio projects. The extra functionality will take your app to the next level, improve the user experience and impress potential employers.
    1. const store = observable({ players: [ "Player 1", "Player 2", ], // ... }) reaction(() => JSON.stringify(store), json => { localStorage.setItem('store',json); }, { delay: 500, }); let json = localStorage.getItem('store'); if(json) { Object.assign(store, JSON.parse(json)); }
  4. May 2020
    1. localForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to store many types of data instead of just strings.
    1. They collect very little data so their "export" feature is very simplistic: just an in-browser JSON dump of localStorage and cookies.

      Browser Data

      We use data on your browser to offer features on this website. We do not store this data, but we can offer a view of your browser data at any time.

      View Browser Data