355355 </ label >
356356 < ul class ="md-nav__list " data-md-component ="toc " data-md-scrollfix >
357357
358+ < li class ="md-nav__item ">
359+ < a href ="#scoped-storage " class ="md-nav__link ">
360+ < span class ="md-ellipsis ">
361+ Scoped storage
362+ </ span >
363+ </ a >
364+
365+ </ li >
366+
358367 < li class ="md-nav__item ">
359368 < a href ="#creating-a-storage " class ="md-nav__link ">
360369 < span class ="md-ellipsis ">
592601 </ label >
593602 < ul class ="md-nav__list " data-md-component ="toc " data-md-scrollfix >
594603
604+ < li class ="md-nav__item ">
605+ < a href ="#scoped-storage " class ="md-nav__link ">
606+ < span class ="md-ellipsis ">
607+ Scoped storage
608+ </ span >
609+ </ a >
610+
611+ </ li >
612+
595613 < li class ="md-nav__item ">
596614 < a href ="#creating-a-storage " class ="md-nav__link ">
597615 < span class ="md-ellipsis ">
@@ -678,6 +696,12 @@ <h1 id="using-async-storage">Using Async Storage<a class="headerlink" href="#usi
678696It mirrors the Web Storage API, with additional support for batch operations.</ p >
679697< p > < strong > Note:</ strong > AsyncStorage only stores strings. To save objects, arrays, or other non-string values, serialize them with
680698< code > JSON.stringify</ code > before storing, and use < code > JSON.parse</ code > when reading them back.</ p >
699+ < h2 id ="scoped-storage "> Scoped storage< a class ="headerlink " href ="#scoped-storage " title ="Permanent link "> ¶</ a > </ h2 >
700+ < p > Each storage instance has its own isolated data, independent of other instances, based on the name you give it. This is known as < strong > scoped storage</ strong > .</ p >
701+ < div class ="admonition warning ">
702+ < p class ="admonition-title "> Windows and visionOS support</ p >
703+ < p > Windows and visionOS do not support scoped storages. It falls back to the previous v2 implementation, which provides a single storage per application.</ p >
704+ </ div >
681705< h2 id ="creating-a-storage "> Creating a storage< a class ="headerlink " href ="#creating-a-storage " title ="Permanent link "> ¶</ a > </ h2 >
682706< p > Create a new storage instance by calling < code > createAsyncStorage</ code > with a unique database name:</ p >
683707< div class ="admonition note ">
@@ -688,20 +712,6 @@ <h2 id="creating-a-storage">Creating a storage<a class="headerlink" href="#creat
688712</ span > < span id ="__span-0-2 "> < a id ="__codelineno-0-2 " name ="__codelineno-0-2 " href ="#__codelineno-0-2 "> </ a >
689713</ span > < span id ="__span-0-3 "> < a id ="__codelineno-0-3 " name ="__codelineno-0-3 " href ="#__codelineno-0-3 "> </ a > < span class ="kd "> const</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="nx "> createAsyncStorage</ span > < span class ="p "> (</ span > < span class ="s2 "> "john"</ span > < span class ="p "> );</ span >
690714</ span > </ code > </ pre > </ div >
691- < p > Each instance is uniquely identified by its name.
692- Data in one storage instance is isolated, ensuring that different names do not share data.</ p >
693- < div class ="admonition note ">
694- < p class ="admonition-title "> Web</ p >
695- < p > On the Web, AsyncStorage uses < a href ="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API "> IndexedDB</ a > , which supports scoped storages.</ p >
696- </ div >
697- < div class ="admonition warning ">
698- < p class ="admonition-title "> Windows</ p >
699- < p > Windows does not support scoped storages. It falls back to the previous v2 implementation, which provides a single storage per application.</ p >
700- </ div >
701- < div class ="admonition warning ">
702- < p class ="admonition-title "> visionOS</ p >
703- < p > visionOS does not support scoped storages. It falls back to the previous v2 implementation, which provides a single storage per application.</ p >
704- </ div >
705715< h2 id ="using-a-storage "> Using a storage< a class ="headerlink " href ="#using-a-storage " title ="Permanent link "> ¶</ a > </ h2 >
706716< p > After creating a storage instance, the storage is ready to use.</ p >
707717< h3 id ="single-item-operations "> Single item operations< a class ="headerlink " href ="#single-item-operations " title ="Permanent link "> ¶</ a > </ h3 >
@@ -715,16 +725,15 @@ <h3 id="single-item-operations">Single item operations<a class="headerlink" href
715725</ span > < span id ="__span-1-2 "> < a id ="__codelineno-1-2 " name ="__codelineno-1-2 " href ="#__codelineno-1-2 "> </ a > < span class ="c1 "> // previously stored value is overriden</ span >
716726</ span > < span id ="__span-1-3 "> < a id ="__codelineno-1-3 " name ="__codelineno-1-3 " href ="#__codelineno-1-3 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> setItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "john_doe"</ span > < span class ="p "> );</ span >
717727</ span > < span id ="__span-1-4 "> < a id ="__codelineno-1-4 " name ="__codelineno-1-4 " href ="#__codelineno-1-4 "> </ a >
718- </ span > < span id ="__span-1-5 "> < a id ="__codelineno-1-5 " name ="__codelineno-1-5 " href ="#__codelineno-1-5 "> </ a > < span class ="c1 "> // read current value</ span >
719- </ span > < span id ="__span-1-6 "> < a id ="__codelineno-1-6 " name ="__codelineno-1-6 " href ="#__codelineno-1-6 "> </ a > < span class ="kd "> let</ span > < span class ="w "> </ span > < span class ="nx "> username</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> getItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
720- </ span > < span id ="__span-1-7 "> < a id ="__codelineno-1-7 " name ="__codelineno-1-7 " href ="#__codelineno-1-7 "> </ a > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nx "> log</ span > < span class ="p "> (</ span > < span class ="nx "> username</ span > < span class ="p "> );</ span > < span class ="w "> </ span > < span class ="c1 "> // "john_doe"</ span >
721- </ span > < span id ="__span-1-8 "> < a id ="__codelineno-1-8 " name ="__codelineno-1-8 " href ="#__codelineno-1-8 "> </ a >
722- </ span > < span id ="__span-1-9 "> < a id ="__codelineno-1-9 " name ="__codelineno-1-9 " href ="#__codelineno-1-9 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> removeItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
723- </ span > < span id ="__span-1-10 "> < a id ="__codelineno-1-10 " name ="__codelineno-1-10 " href ="#__codelineno-1-10 "> </ a > < span class ="c1 "> // does nothing, item is already removed</ span >
724- </ span > < span id ="__span-1-11 "> < a id ="__codelineno-1-11 " name ="__codelineno-1-11 " href ="#__codelineno-1-11 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> removeItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
725- </ span > < span id ="__span-1-12 "> < a id ="__codelineno-1-12 " name ="__codelineno-1-12 " href ="#__codelineno-1-12 "> </ a >
726- </ span > < span id ="__span-1-13 "> < a id ="__codelineno-1-13 " name ="__codelineno-1-13 " href ="#__codelineno-1-13 "> </ a > < span class ="nx "> username</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> getItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
727- </ span > < span id ="__span-1-14 "> < a id ="__codelineno-1-14 " name ="__codelineno-1-14 " href ="#__codelineno-1-14 "> </ a > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nx "> log</ span > < span class ="p "> (</ span > < span class ="nx "> username</ span > < span class ="p "> );</ span > < span class ="w "> </ span > < span class ="c1 "> // null</ span >
728+ </ span > < span id ="__span-1-5 "> < a id ="__codelineno-1-5 " name ="__codelineno-1-5 " href ="#__codelineno-1-5 "> </ a > < span class ="kd "> let</ span > < span class ="w "> </ span > < span class ="nx "> username</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> getItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
729+ </ span > < span id ="__span-1-6 "> < a id ="__codelineno-1-6 " name ="__codelineno-1-6 " href ="#__codelineno-1-6 "> </ a > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nx "> log</ span > < span class ="p "> (</ span > < span class ="nx "> username</ span > < span class ="p "> );</ span > < span class ="w "> </ span > < span class ="c1 "> // "john_doe"</ span >
730+ </ span > < span id ="__span-1-7 "> < a id ="__codelineno-1-7 " name ="__codelineno-1-7 " href ="#__codelineno-1-7 "> </ a >
731+ </ span > < span id ="__span-1-8 "> < a id ="__codelineno-1-8 " name ="__codelineno-1-8 " href ="#__codelineno-1-8 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> removeItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
732+ </ span > < span id ="__span-1-9 "> < a id ="__codelineno-1-9 " name ="__codelineno-1-9 " href ="#__codelineno-1-9 "> </ a > < span class ="c1 "> // does nothing, item is already removed</ span >
733+ </ span > < span id ="__span-1-10 "> < a id ="__codelineno-1-10 " name ="__codelineno-1-10 " href ="#__codelineno-1-10 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> removeItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
734+ </ span > < span id ="__span-1-11 "> < a id ="__codelineno-1-11 " name ="__codelineno-1-11 " href ="#__codelineno-1-11 "> </ a >
735+ </ span > < span id ="__span-1-12 "> < a id ="__codelineno-1-12 " name ="__codelineno-1-12 " href ="#__codelineno-1-12 "> </ a > < span class ="nx "> username</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> getItem</ span > < span class ="p "> (</ span > < span class ="s2 "> "username"</ span > < span class ="p "> );</ span >
736+ </ span > < span id ="__span-1-13 "> < a id ="__codelineno-1-13 " name ="__codelineno-1-13 " href ="#__codelineno-1-13 "> </ a > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nx "> log</ span > < span class ="p "> (</ span > < span class ="nx "> username</ span > < span class ="p "> );</ span > < span class ="w "> </ span > < span class ="c1 "> // null</ span >
728737</ span > </ code > </ pre > </ div >
729738< h3 id ="batch-operations "> Batch operations< a class ="headerlink " href ="#batch-operations " title ="Permanent link "> ¶</ a > </ h3 >
730739< p > Use batch methods to handle multiple keys at once. These operations are performed atomically: either all changes are
@@ -734,24 +743,21 @@ <h3 id="batch-operations">Batch operations<a class="headerlink" href="#batch-ope
734743< li > < code > getMany</ code > retrieves multiple keys at once, returning < code > null</ code > for any keys that don’t exist.</ li >
735744< li > < code > removeMany</ code > deletes multiple keys; non-existing keys are ignored without errors.</ li >
736745</ ul >
737- < div class ="language-typescript highlight "> < pre > < span > </ span > < code > < span id ="__span-2-1 "> < a id ="__codelineno-2-1 " name ="__codelineno-2-1 " href ="#__codelineno-2-1 "> </ a > < span class ="c1 "> // store values</ span >
738- </ span > < span id ="__span-2-2 "> < a id ="__codelineno-2-2 " name ="__codelineno-2-2 " href ="#__codelineno-2-2 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> setMany</ span > < span class ="p "> ({</ span >
739- </ span > < span id ="
__span-2-3 "
> < a id ="
__codelineno-2-3 "
name ="
__codelineno-2-3 "
href ="
#__codelineno-2-3 "
> </ a > < span class ="
w "
> </ span > < span class ="
nx "
> email
</ span > < span class ="
o "
> :
</ span > < span class ="
w "
> </ span > < span class ="
s2 "
> "
[email protected] "
</ span > < span class ="
p "
> ,
</ span > 740- </ span > < span id ="__span-2-4 "> < a id ="__codelineno-2-4 " name ="__codelineno-2-4 " href ="#__codelineno-2-4 "> </ a > < span class ="w "> </ span > < span class ="nx "> age</ span > < span class ="o "> :</ span > < span class ="w "> </ span > < span class ="s2 "> "30"</ span > < span class ="p "> ,</ span >
741- </ span > < span id ="__span-2-5 "> < a id ="__codelineno-2-5 " name ="__codelineno-2-5 " href ="#__codelineno-2-5 "> </ a > < span class ="p "> });</ span >
742- </ span > < span id ="__span-2-6 "> < a id ="__codelineno-2-6 " name ="__codelineno-2-6 " href ="#__codelineno-2-6 "> </ a >
743- </ span > < span id ="__span-2-7 "> < a id ="__codelineno-2-7 " name ="__codelineno-2-7 " href ="#__codelineno-2-7 "> </ a > < span class ="c1 "> // read multiple items</ span >
744- </ span > < span id ="__span-2-8 "> < a id ="__codelineno-2-8 " name ="__codelineno-2-8 " href ="#__codelineno-2-8 "> </ a > < span class ="kd "> const</ span > < span class ="w "> </ span > < span class ="nx "> data</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> getMany</ span > < span class ="p "> ([</ span > < span class ="s2 "> "email"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "age"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "username"</ span > < span class ="p "> ]);</ span >
745- </ span > < span id ="__span-2-9 "> < a id ="__codelineno-2-9 " name ="__codelineno-2-9 " href ="#__codelineno-2-9 "> </ a > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nx "> log</ span > < span class ="p "> (</ span > < span class ="nx "> data</ span > < span class ="p "> );</ span >
746- </ span > < span id ="__span-2-10 "> < a id ="__codelineno-2-10 " name ="__codelineno-2-10 " href ="#__codelineno-2-10 "> </ a > < span class ="c1 "> // {</ span >
747- </ span > < span id ="
__span-2-11 "
> < a id ="
__codelineno-2-11 "
name ="
__codelineno-2-11 "
href ="
#__codelineno-2-11 "
> </ a > < span class ="
c1 "
> // email: "
[email protected] ",
</ span > 748- </ span > < span id ="__span-2-12 "> < a id ="__codelineno-2-12 " name ="__codelineno-2-12 " href ="#__codelineno-2-12 "> </ a > < span class ="c1 "> // age: "30",</ span >
749- </ span > < span id ="__span-2-13 "> < a id ="__codelineno-2-13 " name ="__codelineno-2-13 " href ="#__codelineno-2-13 "> </ a > < span class ="c1 "> // username: null, // key doesn't exist</ span >
750- </ span > < span id ="__span-2-14 "> < a id ="__codelineno-2-14 " name ="__codelineno-2-14 " href ="#__codelineno-2-14 "> </ a > < span class ="c1 "> // }</ span >
751- </ span > < span id ="__span-2-15 "> < a id ="__codelineno-2-15 " name ="__codelineno-2-15 " href ="#__codelineno-2-15 "> </ a >
752- </ span > < span id ="__span-2-16 "> < a id ="__codelineno-2-16 " name ="__codelineno-2-16 " href ="#__codelineno-2-16 "> </ a > < span class ="c1 "> // remove multiple items</ span >
753- </ span > < span id ="__span-2-17 "> < a id ="__codelineno-2-17 " name ="__codelineno-2-17 " href ="#__codelineno-2-17 "> </ a > < span class ="c1 "> // non-existing keys are ignored</ span >
754- </ span > < span id ="__span-2-18 "> < a id ="__codelineno-2-18 " name ="__codelineno-2-18 " href ="#__codelineno-2-18 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> removeMany</ span > < span class ="p "> ([</ span > < span class ="s2 "> "email"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "age"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "not-here"</ span > < span class ="p "> ]);</ span >
746+ < div class ="language-typescript highlight "> < pre > < span > </ span > < code > < span id ="__span-2-1 "> < a id ="__codelineno-2-1 " name ="__codelineno-2-1 " href ="#__codelineno-2-1 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> setMany</ span > < span class ="p "> ({</ span >
747+ </ span > < span id ="
__span-2-2 "
> < a id ="
__codelineno-2-2 "
name ="
__codelineno-2-2 "
href ="
#__codelineno-2-2 "
> </ a > < span class ="
w "
> </ span > < span class ="
nx "
> email
</ span > < span class ="
o "
> :
</ span > < span class ="
w "
> </ span > < span class ="
s2 "
> "
[email protected] "
</ span > < span class ="
p "
> ,
</ span > 748+ </ span > < span id ="__span-2-3 "> < a id ="__codelineno-2-3 " name ="__codelineno-2-3 " href ="#__codelineno-2-3 "> </ a > < span class ="w "> </ span > < span class ="nx "> age</ span > < span class ="o "> :</ span > < span class ="w "> </ span > < span class ="s2 "> "30"</ span > < span class ="p "> ,</ span >
749+ </ span > < span id ="__span-2-4 "> < a id ="__codelineno-2-4 " name ="__codelineno-2-4 " href ="#__codelineno-2-4 "> </ a > < span class ="p "> });</ span >
750+ </ span > < span id ="__span-2-5 "> < a id ="__codelineno-2-5 " name ="__codelineno-2-5 " href ="#__codelineno-2-5 "> </ a >
751+ </ span > < span id ="__span-2-6 "> < a id ="__codelineno-2-6 " name ="__codelineno-2-6 " href ="#__codelineno-2-6 "> </ a > < span class ="kd "> const</ span > < span class ="w "> </ span > < span class ="nx "> data</ span > < span class ="w "> </ span > < span class ="o "> =</ span > < span class ="w "> </ span > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> getMany</ span > < span class ="p "> ([</ span > < span class ="s2 "> "email"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "age"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "username"</ span > < span class ="p "> ]);</ span >
752+ </ span > < span id ="__span-2-7 "> < a id ="__codelineno-2-7 " name ="__codelineno-2-7 " href ="#__codelineno-2-7 "> </ a > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nx "> log</ span > < span class ="p "> (</ span > < span class ="nx "> data</ span > < span class ="p "> );</ span >
753+ </ span > < span id ="__span-2-8 "> < a id ="__codelineno-2-8 " name ="__codelineno-2-8 " href ="#__codelineno-2-8 "> </ a > < span class ="c1 "> // {</ span >
754+ </ span > < span id ="
__span-2-9 "
> < a id ="
__codelineno-2-9 "
name ="
__codelineno-2-9 "
href ="
#__codelineno-2-9 "
> </ a > < span class ="
c1 "
> // email: "
[email protected] ",
</ span > 755+ </ span > < span id ="__span-2-10 "> < a id ="__codelineno-2-10 " name ="__codelineno-2-10 " href ="#__codelineno-2-10 "> </ a > < span class ="c1 "> // age: "30",</ span >
756+ </ span > < span id ="__span-2-11 "> < a id ="__codelineno-2-11 " name ="__codelineno-2-11 " href ="#__codelineno-2-11 "> </ a > < span class ="c1 "> // username: null, // key doesn't exist</ span >
757+ </ span > < span id ="__span-2-12 "> < a id ="__codelineno-2-12 " name ="__codelineno-2-12 " href ="#__codelineno-2-12 "> </ a > < span class ="c1 "> // }</ span >
758+ </ span > < span id ="__span-2-13 "> < a id ="__codelineno-2-13 " name ="__codelineno-2-13 " href ="#__codelineno-2-13 "> </ a >
759+ </ span > < span id ="__span-2-14 "> < a id ="__codelineno-2-14 " name ="__codelineno-2-14 " href ="#__codelineno-2-14 "> </ a > < span class ="c1 "> // non-existing keys are ignored</ span >
760+ </ span > < span id ="__span-2-15 "> < a id ="__codelineno-2-15 " name ="__codelineno-2-15 " href ="#__codelineno-2-15 "> </ a > < span class ="k "> await</ span > < span class ="w "> </ span > < span class ="nx "> userStorage</ span > < span class ="p "> .</ span > < span class ="nx "> removeMany</ span > < span class ="p "> ([</ span > < span class ="s2 "> "email"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "age"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "not-here"</ span > < span class ="p "> ]);</ span >
755761</ span > </ code > </ pre > </ div >
756762< h3 id ="read-all-keys "> Read all keys< a class ="headerlink " href ="#read-all-keys " title ="Permanent link "> ¶</ a > </ h3 >
757763< p > To retrieve all keys currently used in the storage instance, use < code > getAllKeys</ code > :</ p >
0 commit comments