@@ -113,6 +113,8 @@ const [state, setState] = makePersisted(createSignal(), {
113113});
114114```
115115
116+ Keep in mind that it will only run on the client, so unless you have
117+
116118#### TauriStorage
117119
118120[ Tauri] ( https://tauri.app ) is a lightweight run-time for desktop (and soon also mobile) applications utilizing web front-end frameworks. While it supports ` localStorage ` and ` sessionStorage ` , it also has its own store plugin with the benefit of improved stability. To use it, install the required modules both on the side of JavaScript and Rust after setting up the project with the help of their command-line interface:
@@ -157,11 +159,15 @@ import { tauriStorage } from "@solid-primitives/storage/tauri";
157159const storage = window .__TAURI_INTERNALS__ ? tauriStorage () : localStorage ;
158160```
159161
160- #### IndexedDB, WebSQL
162+ #### Object storage
161163
162- There is also [ ` localForage ` ] ( https://localforage.github.io/localForage/ ) , which uses ` IndexedDB ` , ` WebSQL `
163- or ` localStorage ` to provide an asynchronous Storage API that can ideally store much more than the few Megabytes that
164- are available in most browsers.
164+ This package also provides a way to create a storage API wrapper for an object called ` makeObjectStorage(object) ` . This is especially useful as a server fallback if you want to store the data in your user session or database object:
165+
166+ ``` ts
167+ const [state, setState] = createPersisted (createSignal (), {
168+ storage: globalThis .localStorage ?? makeObjectStorage (session .userState )
169+ });
170+ ```
165171
166172#### Multiplexed storages
167173
@@ -264,179 +270,6 @@ const customStorage = addWithOptionsMethod(storage_supporting_options);
264270const boundCustomStorage = customStorage .withOptions (myOptions );
265271```
266272
267- ---
268-
269- ### Deprecated primitives:
270-
271- The previous implementation proved to be confusing and cumbersome for most people who just wanted to persist their
272- signals and stores, so they are now deprecated and will soon be removed from this package.
273-
274- ` createStorage ` is meant to wrap any ` localStorage ` -like API to be as accessible as
275- a [ Solid Store] ( https://www.solidjs.com/docs/latest/api#createstore ) . The main differences are
276-
277- - that this store is persisted in whatever API is used,
278- - that you can only use the topmost layer of the object and
279- - that you have additional methods in an object as the third part of the returned tuple:
280-
281- ``` ts
282- const [store, setStore, {
283- remove : (key : string) = > void ;
284- clear : () = > void ;
285- toJSON : () = > ({[key : string ]: string });
286- }]
287- = createStorage ({api: sessionStorage , prefix: ' my-app' });
288-
289- setStore (' key' , ' value' );
290- store .key ; // 'value'
291- ```
292-
293- The props object support the following parameters:
294-
295- ` api `
296- : An array of or a single ` localStorage ` -like storage API; default will be ` localStorage ` if it exists; an empty array
297- or no API will not throw an error, but only ever get ` null ` and not actually persist anything
298-
299- ` prefix `
300- : A string that will be prefixed every key inside the API on set and get operations
301-
302- ` serializer / deserializer `
303- : A set of function to filter the input and output; the ` serializer ` takes an arbitrary object and returns a string,
304- e.g. ` JSON.stringify ` , whereas the ` deserializer ` takes a string and returns the requested object again.
305-
306- ` options `
307- : For APIs that support options as third argument in the ` getItem ` and ` setItem ` method (see helper
308- type ` StorageWithOptions<O> ` ), you can add options they will receive on every operation.
309-
310- ---
311-
312- There are a number of convenience Methods primed with common storage APIs and our own version to use cookies:
313-
314- ``` ts
315- createLocalStorage ();
316- createSessionStorage ();
317- createCookieStorage ();
318- ```
319-
320- ---
321-
322- #### Asynchronous storage APIs
323-
324- In case you have APIs that persist data on the server or via ` ServiceWorker ` in
325- a [ ` CookieStore ` ] ( https://wicg.github.io/cookie-store/#CookieStore ) , you can wrap them into an asynchronous
326- storage (` AsyncStorage ` or ` AsyncStorageWithOptions ` API) and use them with ` createAsyncStorage ` :
327-
328- ``` ts
329- type CookieStoreOptions = {
330- path: string ;
331- domain: string ;
332- expires: DOMTimeStamp ;
333- sameSite: " None" | " Lax" | " Strict"
334- }
335- const CookieStoreAPI: AsyncStorageWithOptions <CookieStoreOptions > = {
336- getItem : (key ) => cookieStore .get (key ),
337- getAll : () => cookieStore .getAll (),
338- setItem : (key : string , value : string , options : CookieStoreOptions = {}) => cookieStore .set ({
339- ... options , name , value
340- }),
341- removeItem : (key ) => cookieStore .delete (key ),
342- clear : async () => {
343- const all = await cookieStore .getAll ();
344- for (const key of all ) {
345- await cookieStore .delete (key );
346- }
347- },
348- key : async (index : number ) => {
349- const all = await cookieStore .getAll ();
350- return Object .keys (all )[index ];
351- }
352- }
353- )
354- ;
355-
356- const [cookies, setCookie, {
357- remove : (key : string) = > void ;
358- clear : () = > void ;
359- toJSON : () = > ({[key : string ]: string
360- })
361- ;
362- }]
363- = createAsyncStorage ({api: CookieStoreAPI , prefix: ' my-app' , sync: false });
364-
365- await setStore (' key' , ' value' );
366- await store .key ; // 'value'
367- ```
368-
369- It works exactly like a synchronous storage, with the exception that you have to ` await ` every single return value. Once
370- the ` CookieStore ` API becomes more prevalent, we will integrate support out of the box.
371-
372- If you cannot use ` document.cookie ` , you can overwrite the entry point using the following tuple:
373-
374- ``` ts
375- import {cookieStorage } from ' @solid-primitives/storage' ;
376-
377- cookieStorage ._cookies = [object
378- :
379- {
380- [name
381- :
382- string
383- ]:
384- CookieProxy
385- }
386- ,
387- name : string
388- ]
389- ;
390- ```
391-
392- If you need to abstract an API yourself, you can use a getter and a setter:
393-
394- ``` ts
395- const CookieAbstraction = {
396- get cookie() {
397- return myCookieJar .toString ()
398- }
399- set cookie(cookie ) {
400- const data = {};
401- cookie .replace (/ ([^ =] + )=(?:([^ ;] + );? )/ g , (_ , key , value ) => {
402- data [key ] = value
403- });
404- myCookieJar .set (data );
405- }
406- }
407- cookieStorage ._cookies = [CookieAbstraction , ' cookie' ];
408- ```
409-
410- ---
411-
412- ` createStorageSignal ` is meant for those cases when you only need to conveniently access a single value instead of full
413- access to the storage API:
414-
415- ``` ts
416- const [value, setValue] = createStorageSignal (" value" , { api: cookieStorage });
417-
418- setValue (" value" );
419- value (); // 'value'
420- ```
421-
422- As a convenient additional method, you can also use ` createCookieStorageSignal(key, initialValue, options) ` .
423-
424- ---
425-
426- ### Options
427-
428- The properties of your ` createStorage ` /` createAsyncStorage ` /` createStorageSignal ` props are:
429-
430- - ` api ` : the (synchronous or
431- asynchronous) [ Storage-like API] ( https://developer.mozilla.org/de/docs/Web/API/Web_Storage_API ) , default
432- is ` localStorage `
433- - ` deserializer ` (optional): a ` deserializer ` or parser for the stored data
434- - ` serializer ` (optional): a ` serializer ` or string converter for the stored data
435- - ` options ` (optional): default options for the set-call of Storage-like API, if supported
436- - ` prefix ` (optional): a prefix for the Storage keys
437- - ` sync ` (optional): if set to
438- false, [ event synchronization] ( https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent ) is disabled
439-
440273## Demo
441274
442275[ Live Demo] ( https://primitives.solidjs.community/playground/storage ) - [ Sources] ( https://github.com/solidjs-community/solid-primitives/tree/main/packages/storage/dev )
0 commit comments