How to clear Local Storage from client whenever i publish new code

Question

I have build my application on Angular 4 and I am using local storage to store user session. What I want is whenever I publish my application, user local Storage should get reset so that data before release should not create any problem.

How do i do that?

Possible duplicate of [Clearing localStorage in javascript?](https://stackoverflow.com/questions/7667958/clearing-localstorage-in-javascript) — VTodorov, Feb 15 '18 at 06:57
in jQuery - https://stackoverflow.com/questions/10710674/html5-localstorage-remove-and-clear-all-data — NnN, Feb 15 '18 at 06:58
@NnN jQuery has nothing to do with `localStorage` and none of the answers in the link has any reference to jQuery O.o — Andreas, Feb 15 '18 at 06:59
you have to write the script with version update whenever new version is less than current clear local storage but he will make the user to log out, 1 st time, you cant do this on publishing code, it's client side so it will be updated when user open site — sunil, Feb 15 '18 at 07:02
@NnN Yes and no. That one answer only uses jQuery to wait for the page to load. — Andreas, Feb 15 '18 at 07:09

score 6 · Accepted Answer · answered Feb 15 '18 at 06:58

6

using versioning, keep an extra key at client side which will be having the last version. If version matches then it means no new code has been published, if version doesn't match which tells that new code has been passed, then just have a utility which will clear the local-storage.

answered Feb 15 '18 at 06:58

Partha Roy

1,575
15
16

that way i have to ensure each time that version should be update to +1 or can it be done with angular project version in package json. – Praveen Rawat Feb 15 '18 at 07:17
have a global constant which you can update each time you are publishing, considering you are using some build scripts. – Partha Roy Feb 15 '18 at 07:22
i will be updating package.json file with new version each time and then checking that with the old session. – Praveen Rawat Feb 15 '18 at 07:34
@PraveenRawat exactly. Try to include this in Build tool itself so that it becomes automated. – Partha Roy Feb 23 '18 at 04:45

philosopher · Answer 2 · 2023-03-25T09:50:36.987

Use app versioning.

Disclaimer: THIS SOLUTION IS NOT FOR WINDOWS USER!

The best practice is to automate the versioning so that you don't have to manually set the app version again and again.

The idea is to

Get the current git SHA, if no older SHA found, store it in the localstorage.
If older SHA found, compare the SHAs, if not equal, clear the storage, set the new SHA in localstorage.

This will give you the current short version of the current commit SHA.

git rev-parse --short HEAD

In your package.json

"scripts": {     
      "build": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` react-scripts build",     
      "start": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` react-scripts start" 
 }

in the code, we get this variable through

process.env.REACT_APP_CURRENT_GIT_SHA

Code:

const APP_VERSION = process.env.REACT_APP_CURRENT_GIT_SHA;

if (typeof localStorage.APP_VERSION === 'undefined' || localStorage.APP_VERSION === null) {
    localStorage.setItem('APP_VERSION', APP_VERSION);
}

if (localStorage.APP_VERSION != APP_VERSION) {
    localStorage.clear();
}`

It helped me, thx! I would also add, that in the package.json I use `"scripts": { "build": "REACT_APP_CURRENT_GIT_SHA=\`git rev-parse --short HEAD\` react-scripts build", "start": "REACT_APP_CURRENT_GIT_SHA=\`git rev-parse --short HEAD\` react-scripts start", }` — Ihor, Jul 29 '21 at 15:15
[This article](https://medium.com/tunaiku-tech/automate-javascript-project-versioning-with-commitizen-and-standard-version-6a967afae7) about `app versioning` is way more better. — Gabriel Arghire, Nov 12 '21 at 08:21

score 0 · Answer 3 · answered Feb 15 '18 at 07:01

0

You could store a version string in your application and in the local storage. On your app startup you check if the string in localStorage matches the string in your application. If not, clear the local storage.

answered Feb 15 '18 at 07:01

Ma Kobi

888
6
21

Thanks man for reply but I was thinking to automate this thing. So that i do not have to go through the pain of release. – Praveen Rawat Feb 15 '18 at 07:18

Davron Achilov · Answer 4 · 2018-10-24T10:34:18.837

config/app.php

return [
        'version'         => env('APP_VERSION', "1.0.0"),

In ***.blade.php

<script>
    var version_app = "{{ config('app.version') }}"
</script>

Add to **.js

if(typeof localStorage.version_app === 'undefined' || localStorage.version_app === null) {
        localStorage.setItem('version_app', version_app);
    }
if(localStorage.version_app != version_app){
            localStorage.clear();
    }

When you change the version, the script automatically deletes the localStorage data

Chigozie Ijomah · Answer 5 · 2022-07-07T12:20:16.080

MULTI-PLATFORM USE CASES and OPTIONAL STORAGE CLEARING (following Paras answer).

Since the script shell for npm is CMD.exe by default and since CMD.exe does not support command substitution.

By command substitution, I mean this syntax which takes the return value for a command and uses it as an argument for another

REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD`

The workaround that worked for me was to change the script shell for npm to bash by running this in powershell

npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"

Note that you need to have git installed

And then using cross-env so I can use a single syntax for both linux and windows platforms

My package.json script ended up looking like this

{
    "start": "cross-env REACT_APP_CURRENT_GIT_SHA=$(git rev-parse --short HEAD) REACT_APP_CLEAR_STORAGE=${npm_config_clear_storage} react-scripts start",
    "build": "cross-env REACT_APP_CURRENT_GIT_SHA=$(git rev-parse --short HEAD) REACT_APP_CLEAR_STORAGE=${npm_config_clear_storage} react-scripts build"
}

I added REACT_APP_CLEAR_STORAGE=${npm_config_clear_storage} so I could manually specify when running the scripts if I wanted the localStorage to get cleared. (If you do not want this, do not add it)

Note that the extra argument works when the version (REACT_APP_CURRENT_GIT_SHA) changes only

My code now looks like this

const APP_VERSION = process.env.REACT_APP_CURRENT_GIT_SHA;
const CLEAR_STORAGE = !!process.env.REACT_APP_CLEAR_STORAGE;

if (localStorage.APP_VERSION != APP_VERSION) {
    if (CLEAR_STORAGE) {
        localStorage.clear();
    }
    localStorage.setItem("APP_VERSION", APP_VERSION);
}

And to run build and clear localStorage, I do npm run build --clear_storage

Meanwhile, to run build without clearing localStorage, I just do npm run build

How to clear Local Storage from client whenever i publish new code

5 Answers5