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?
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?
Share Improve this question asked Feb 15, 2018 at 6:55 Praveen RawatPraveen Rawat 6581 gold badge12 silver badges28 bronze badges 7- Possible duplicate of Clearing localStorage in javascript? – VTodorov Commented Feb 15, 2018 at 6:57
- in jQuery - stackoverflow./questions/10710674/… – NnN Commented Feb 15, 2018 at 6:58
- @VTodorov I think, you didn't understand what he wants. – Ma Kobi Commented Feb 15, 2018 at 6:59
-
1
@NnN jQuery has nothing to do with
localStorageand none of the answers in the link has any reference to jQuery O.o – Andreas Commented Feb 15, 2018 at 6: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 Commented Feb 15, 2018 at 7:02
5 Answers
Reset to default 7using 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.
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, pare 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 mit 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();
}`
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.
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
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 mand substitution.
By mand substitution, I mean this syntax which takes the return value for a mand 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