How to Explicitly Request End User to Not Remove Local Storage Data?

Question

I am developing application using angularJS. my application require to save data locally. So, I am using HTML5 local storage.

The issue with HTML5 local storage is that when user clears browsing data all the data is being lost and we need this to be avoided. I realize that since the data is stored on the users computer, there is no way to 100% secure the data.

Essentially, is there a way to explicitly tell the browser that this data is special and should not be cleared when data from other sites gets cleared? This would have to be a way that explicitly encourages the user not to delete the local data from this specific site. Or, alternatively, will we need to incorporate a local database. Which local database will be the best option?

Answer 1

You can't prevent the user from deleting their data, from their web browser (because it is their web browser).

There are no local databases to which that rule does not apply.

If you want to protect against accidental deletion of data: Sync it to a user account on your server.

Answer 2

I believe what you are looking for is navigator.storage.persist(). It will not prevent the user from deleting the data (because that would be a major security breach), but it will, essentially, inform the browser that the data must not be deleted because the data cannot be refetched/regenerated from the server. The below code snippet will accomplish what you are after in supporting browsers.

"use strict"; // always put this just once at the start of all javascript files
function persistStorage(thenFunc) {
    thenFunc = thenFunc || function(success){
        if (!success) console.error("Failed to request persistant storage!");
    };
    if (
      typeof navigator === "object" && 
      typeof navigator.storage === "object" && 
      typeof navigator.storage.persist === "function"
    ) {
        navigator.storage.persist().then(
            thenFunc.bind(0, true),
            thenFunc.bind(0, false)
        );
    } else {
        thenFunc(false)
    }
}

Then, call function persistStorage, optionally with a callback that is passed true if it succeeds, to persist your storage.

Answer 3

As far as I know, there is no way of preventing a user from deleting local data from the browser (and there should not be one, in my opinion).

If you really want to be sure to preserve your data, you should sync them with your server.