Use redux to manage specific data saved in either localStorage or sessionStorage
$ npm i redux-browser-storage --save
Include the storage type(s) you want into your standard store creation, assigning to any name you would like.
import {
combineReducers,
createStore
} from 'redux';
import {
localReducer
} from 'redux-browser-storage';
const reducers = combineReducers({
...otherReducers,
local: localReducer // or whatever key you want
});
export default createStore(reducers);
Connect your component to redux, and when you want to update the values use the provided redux actions.
import React, {
PureComponent
} from 'react';
import {
localActions
} from 'redux-browser-storage';
import {
connect
} from 'redux-react';
const mapStateToProps = ({local}) => {
return {
local
};
};
const mapDispatchToProps = {
...localActions
};
@connect(mapStateToProps, mapDispatchToProps)
class App extends PureComponent {
onClickButton = () => {
this.props.setLocalValues({
count: this.props.local.count + 1
});
};
render() {
return (
<button
onClick={this.onClickButton}
type="button"
>
Count: {this.props.local.count || 0}
</button>
)
}
}
All data values in your reducer are automatically synced to their respective browser storage, and the reducer's initial state is based off of existing values in that storage, so all saved values are automatically rehydrated on page load.
clearLocalValues()
Clears the values in localStorage
that were stored via redux-browser-storage
.
onClickClear = () => {
this.props.clearLocalValues();
};
deleteLocalValues(keys: (Array<string>|string))
Deletes the value(s) at the location of keys
in localStorage
. Nested values are allowed by use of dot or bracket notation.
// standard
deleteLocalValues('foo');
// Nested
deleteLocalValues('foo.bar[0].baz');
// multiple
deleteLocalValues(['foo', 'bar[0].baz']);
setLocalValues(values: Object)
Sets the value(s) in localStorage
based on the keys of the object passed. Nested values are allowed by use of dot or bracket notation.
// standard
setLocalValues({
foo: 'bar'
});
// Nested
setLocalValues({
'foo.bar[0]': 'baz'
});
// multiple
setLocalvalues({
foo: 'bar',
'bar[0]': 'baz'
});
clearSessionValues()
Clears the values in sessionStorage
that were stored via redux-browser-storage
.
clearSessionValues();
deleteSessionValues(keys: (Array<string>|string))
Deletes the value(s) at the location of keys
in sessionStorage
. Nested values are allowed by use of dot or bracket notation.
// standard
deleteSessionValues('foo');
// Nested
deleteSessionValues('foo.bar[0].baz');
// multiple
deleteSessionValues(['foo', 'bar[0].baz']);
setSessionValues(values: Object)
Sets the value(s) in sessionStorage
based on the keys of the object passed. Nested values are allowed by use of dot or bracket notation.
// standard
setSessionValues({
foo: 'bar'
});
// Nested
setSessionValues({
'foo.bar[0]': 'baz'
});
// multiple
setSessionValues({
foo: 'bar',
'bar[0]': 'baz'
});
Handles storage of items in localStorage
. This can be assigned to any key you'd like when using combineReducers
, it is not prescriptive.
combineReducers({
permanentCache: localReducer
});
Handles storage of items in sessionStorage
. This can be assigned to any key you'd like when using combineReducers
, it is not prescriptive.
combineReducers({
temporaryCache: sessionReducer
});
Standard stuff, clone the repo and npm i
to get the dependencies. npm scripts available:
build
=> builds the distributed JS withNODE_ENV=development
and with sourcemapsbuild:minified
=> builds the distributed JS withNODE_ENV=production
and minifiedclean
=> removeslib
anddist
foldersdev
=> runs the webpack dev server for the playgroundlint
=> runs ESLint against files in thesrc
folderlint:fix
=> runs ESLint against files in thesrc
folder and fixes any fixable issues discoveredprepublish
=> if in publish, runsprepublish:compile
prepublish:compile
=> runs thelint
,test:coverage
,clean
,transpile
,build
, andbuild:minified
scriptstest
=> runava
with NODE_ENV=testtest:coverage
=> runava
withnyc
to calculate code coveragetest:watch
=> runstest
but with persistent watchertranspile
=> runs Babel against files insrc
to files inlib