Search code examples
vue.jsvuexclientside-caching

How to permanently save heavy data in the client-side in a Vuejs app

I have a heavy data in my vuex store that I need to keep even after a refresh for performance purposes. Are there any proposals except LocalStorage ?

Solution

  • Storing "heavy data" is possible up to 1GB within browsers. Possible through https://developer.mozilla.org/de/docs/Web/API/IndexedDB_API

    Maybe this article is interesting for you. It implements a vuex solution with indexedDB https://netterminalmachine.com/blog/2018/persisting-a-vuex-store-to-indexed-db

    I figured this max space limit of 1GB out the hard way myself. Browsers like Chrome or Firefox will ask you to increase space limit when you need more than 1GB. Safari does not. Its hard capped at ~1024MB storage. If you need more than that you need a native app solution. (Hint: "Chrome" on MacOS devices like iPad, iPhone use Safari under the hood)