Clean Store
A clean interface for browser storage technologies in 1.5kb:
; cookiestoken = 42; // Set itconst t = cookiestoken; // Get itdelete cookiestoken; // Eat it localtoken = 42; // Set itconst t = localtoken; // Get itdelete localtoken; // Del it
Subscribe to changes in any of the objects:
; ; localtoken = 42;localtoken = 'Hello';delete localtoken;
You can also iterate them as expected with Object.keys()
, Object.values()
, etc:
cookiestoken = 42;cookiesname = 'Francisco'; console; // token, name for let val of cookies console; // 42, 'Francisco'
Getting started
Install it with npm:
npm install clean-store
Then import the different parts:
;const cookies local ... = ;
Or use a CDN for the browser:
<script src="https://cdn.jsdelivr.net/npm/clean-store"></script><script> const cookies local ... = store;</script>
Documentation
The above should be enough for most cases, but here are some extra details.
Cookies
Manipulate cookies with the simple getter/setter interface:
; cookiestoken = 42; // Set itconst res = cookiestoken; // Get itdelete cookiestoken; // Eat it
You can change the cookies options globally:
; // Options with its defaults. Note that expires is set to 100 dayscookiesoptions = expires: 100 * 24 * 3600 // The time to expire in seconds domain: false // The domain for the cookie path: '/' // The path for the cookie secure: https ? true : false // Require the use of https; cookiestoken = 24; // Will be stored for ~100 days
WARNING: you should import
options
and then use it as a variable likecookies[options]
. You CANNOT donorcookies.options
.cookies['options']
Cookies can be set to many different standard values, and they will retain the types. This is possible thanks to the underlying library:
cookiesid = 1;cookiesaccepted = true;cookiesname = 'Francisco';cookiesfriends = 3 5;cookiesuser = id: 1 accepted: true name: 'Francisco' ;console; // 'number'console; // 'boolean'console; // 'string'console; // trueconsole; // 'object'
Warning: manually setting values. Values are encoded first with JSON.stringify()
to allow for different types, and then with encodeURIComponent()
to remain RFC 6265 compliant. See the details in the underlying library. If you are setting cookies manually, you'll have to follow the same process:
;documentcookie = `name=`console; // Francisco
You can iterate over the cookies in many different standard ways as normal:
Object;Object;Object;for let key in cookies {}for let val of cookies {}
LocalStorage
For the localStorage, we define local
to simplify the interface:
; localtoken = 42; // Set itconst res = localtoken; // Get itdelete localtoken; // Remove it
localStorage items can be set to many different standard values, and they will retain the types:
localid = 1;localaccepted = true;localname = 'Francisco';localfriends = 3 5;localuser = id: 1 accepted: true name: 'Francisco' ;console; // 'number'console; // 'boolean'console; // 'string'console; // trueconsole; // 'object'
Warning: manually setting values. Values are encoded first with JSON.stringify()
to allow for different types. If you are mixing localStorage with clean-store
, you'll have to follow the same process:
;localStorage;console; // Franciscoconsole; // Francisco
Of course we recommend to stick to the library as much as possible for a cleaner interface:
;localname = 'Francisco';console; // Francisco
You can iterate over the items in many different standard ways as normal:
Object;Object;Object;for let key in local {}for let val of local {}
Subscribe
Subscribe allows you to listen to changes to any object, including yours. It is asynchronous and the callback order is not guaranteed.
; ; localtoken = 42;localtoken = 'Hello';delete localtoken;
Changes work even if you use the native API to change the values, or even if the changes happen on another tab:
; ; // Note that this is the native one:localStorage;
To unsubscribe, store the value returned by subscribe()
and then use it with unsubscribe()
:
; const id = ; ;
You can also unsubscribe by the callback, which is very useful in a React context:
; const cb = console;;;
For instance, if you want to keep the user points synced across tabs with localStorage:
; Component { superprops; thisstate = points: localpoints ; thisupdatePoints = thisupdatePoints; ; } { this; } { ; } { return <div>Points: thisstatepoints</div>; }
Note:
subscribe()
implementation is very basic right now usingsetInterval()
internally. If you are going to use hundreds ofsubscribe()
or need more realtime data this might not be well suited.