{"entry_id": "64159fe5-2c4c-4fc3-965c-9856cc912105", "infos": [{"txt": "Storage API", "language": "english", "position": {"atoms": [{"position_id": 0, "txt": "Storage API", "x": "//title"}]}, "tags": [], "label": "O", "web_segment_id": 0, "global_sentence_id": 0, "edu_l1_label": "EDU_O"}, {"txt": "Framework", "language": "english", "position": {"atoms": [{"position_id": 878, "txt": "Framework", "x": "/html/body/div/div/div[2]/article/main/div[1]/div[1]"}]}, "tags": [], "label": "O", "web_segment_id": 1, "global_sentence_id": 1, "edu_l1_label": "EDU_O"}, {"txt": "Storage", "language": "english", "position": {"atoms": [{"position_id": 880, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/div[1]/div[2]"}]}, "tags": [], "label": "O", "web_segment_id": 2, "global_sentence_id": 2, "edu_l1_label": "EDU_O"}, {"txt": "Storage API", "language": "english", "position": {"atoms": [{"position_id": 882, "txt": "Storage API", "x": "/html/body/div/div/div[2]/article/main/h1"}]}, "tags": ["h1"], "label": "article_title", "web_segment_id": 3, "global_sentence_id": 3, "edu_l1_label": "BOT"}, {"txt": "@plasmohq/storage is a utility library from plasmo (opens in a new tab) that abstracts the persistent storage API available to browser extensions.", "language": "english", "position": {"atoms": [{"position_id": 884, "txt": "@plasmohq/storage", "x": "/html/body/div/div/div[2]/article/main/p[1]/code"}, {"position_id": 886, "txt": " is a utility library from ", "x": "/html/body/div/div/div[2]/article/main/p[1]/code"}, {"position_id": 888, "txt": "plasmo", "x": "/html/body/div/div/div[2]/article/main/p[1]/a"}, {"position_id": 890, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/p[1]/a/span"}, {"position_id": 892, "txt": " that abstracts the persistent storage API available to browser extensions.", "x": "/html/body/div/div/div[2]/article/main/p[1]/a"}]}, "tags": [], "label": "content", "web_segment_id": 4, "global_sentence_id": 4, "edu_l1_label": "BOS"}, {"txt": " It falls back to localStorage when the extension storage API is unavailable, allowing for state sync between extension pages, content scripts, background service workers and web pages.", "language": "english", "position": {"atoms": [{"position_id": 893, "txt": " It falls back to localStorage when the extension storage API is unavailable, allowing for state sync between extension pages, content scripts, background service workers and web pages.", "x": "/html/body/div/div/div[2]/article/main/p[1]/a"}]}, "tags": [], "label": "content", "web_segment_id": 4, "global_sentence_id": 5, "edu_l1_label": "IOS"}, {"txt": "This library will enable the storage permission automatically if used as a dependencies in a Plasmo framework (opens in a new tab) project", "language": "english", "position": {"atoms": [{"position_id": 895, "txt": "This library will enable the ", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p"}, {"position_id": 897, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/code"}, {"position_id": 899, "txt": " permission automatically if used as a ", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/code"}, {"position_id": 901, "txt": "dependencies", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/strong"}, {"position_id": 903, "txt": " in a ", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/strong"}, {"position_id": 905, "txt": "Plasmo framework", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/a"}, {"position_id": 907, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/a/span"}, {"position_id": 909, "txt": " project", "x": "/html/body/div/div/div[2]/article/main/blockquote[1]/p/a"}]}, "tags": ["strong"], "label": "content", "web_segment_id": 5, "global_sentence_id": 6, "edu_l1_label": "IOS"}, {"txt": "Installation", "language": "english", "position": {"atoms": [{"position_id": 911, "txt": "Installation", "x": "/html/body/div/div/div[2]/article/main/h2[1]"}]}, "tags": ["h2"], "label": "content", "web_segment_id": 6, "global_sentence_id": 7, "edu_l1_label": "BOS"}, {"txt": "pnpm install@plasmohq/storage", "language": "english", "position": {"atoms": [{"position_id": 913, "txt": "pnpm ", "x": "/html/body/div/div/div[2]/article/main/div[2]/pre/code/span/span[1]"}, {"position_id": 915, "txt": "install", "x": "/html/body/div/div/div[2]/article/main/div[2]/pre/code/span/span[2]"}, {"position_id": 917, "txt": "@plasmohq/storage", "x": "/html/body/div/div/div[2]/article/main/div[2]/pre/code/span/span[4]"}]}, "tags": [], "label": "code", "web_segment_id": 7, "global_sentence_id": 8, "edu_l1_label": "EDU_O"}, {"txt": "The package exports the following modules, in both ESM and CJS format:", "language": "english", "position": {"atoms": [{"position_id": 919, "txt": "The package exports the following modules, in both ESM and CJS format:", "x": "/html/body/div/div/div[2]/article/main/p[2]"}]}, "tags": [], "label": "content", "web_segment_id": 8, "global_sentence_id": 9, "edu_l1_label": "IOS"}, {"txt": "<table <table class=\"nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0\" position_id=\"79\"><thead position_id=\"80\"><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"81\"><th class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600\" align=\"left\" position_id=\"82\">Modules</th><th class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600\" align=\"left\" position_id=\"83\">Description</th></tr></thead><tbody position_id=\"84\"><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"85\"><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"86\"><code class=\"nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10\" dir=\"ltr\" position_id=\"87\">@plasmohq/storage</code></td><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"88\">The base <a class=\"nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]\" href=\"/framework/storage#storage\" position_id=\"89\">Storage API</a></td></tr><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"90\"><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"91\"><code class=\"nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10\" dir=\"ltr\" position_id=\"92\">@plasmohq/storage/secure</code></td><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"93\">The <a class=\"nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]\" href=\"/framework/storage#secure-storage\" position_id=\"94\">SecureStorage API</a></td></tr><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"95\"><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"96\"><code class=\"nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10\" dir=\"ltr\" position_id=\"97\">@plasmohq/storage/hook</code></td><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"98\">The <a class=\"nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]\" href=\"/framework/storage#react-hook-api\" position_id=\"99\">React Hook Storage API</a></td></tr></tbody></table>", "language": "english", "position": {"atoms": [{"position_id": 79, "txt": "<table <table class=\"nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0\" position_id=\"79\"><thead position_id=\"80\"><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"81\"><th class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600\" align=\"left\" position_id=\"82\">Modules</th><th class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600\" align=\"left\" position_id=\"83\">Description</th></tr></thead><tbody position_id=\"84\"><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"85\"><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"86\"><code class=\"nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10\" dir=\"ltr\" position_id=\"87\">@plasmohq/storage</code></td><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"88\">The base <a class=\"nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]\" href=\"/framework/storage#storage\" position_id=\"89\">Storage API</a></td></tr><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"90\"><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"91\"><code class=\"nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10\" dir=\"ltr\" position_id=\"92\">@plasmohq/storage/secure</code></td><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"93\">The <a class=\"nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]\" href=\"/framework/storage#secure-storage\" position_id=\"94\">SecureStorage API</a></td></tr><tr class=\"nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20\" position_id=\"95\"><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"96\"><code class=\"nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10\" dir=\"ltr\" position_id=\"97\">@plasmohq/storage/hook</code></td><td class=\"nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600\" align=\"left\" position_id=\"98\">The <a class=\"nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]\" href=\"/framework/storage#react-hook-api\" position_id=\"99\">React Hook Storage API</a></td></tr></tbody></table>", "x": "/html/body/div/div/div[2]/article/main/table"}]}, "tags": ["table"], "label": "table", "web_segment_id": 9, "global_sentence_id": 10, "edu_l1_label": "EDU_O"}, {"txt": "Usage Examples", "language": "english", "position": {"atoms": [{"position_id": 921, "txt": "Usage Examples", "x": "/html/body/div/div/div[2]/article/main/h2[2]"}]}, "tags": ["h2"], "label": "title1", "web_segment_id": 10, "global_sentence_id": 11, "edu_l1_label": "BOS"}, {"txt": "See with-storage (opens in a new tab) for an example of how to use this library to sync state between options and popups.", "language": "english", "position": {"atoms": [{"position_id": 923, "txt": "See ", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[1]"}, {"position_id": 925, "txt": "with-storage", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[1]/a"}, {"position_id": 927, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[1]/a/span"}, {"position_id": 929, "txt": " for an example of how to use this library to sync state between options and popups.", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[1]/a"}]}, "tags": ["li"], "label": "content", "web_segment_id": 11, "global_sentence_id": 12, "edu_l1_label": "IOS"}, {"txt": "See with-redux (opens in a new tab) for an example of how to use this library as your Redux persistent layer (crucial for MV3).", "language": "english", "position": {"atoms": [{"position_id": 931, "txt": "See ", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[2]"}, {"position_id": 933, "txt": "with-redux", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[2]/a"}, {"position_id": 935, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[2]/a/span"}, {"position_id": 937, "txt": " for an example of how to use this library as your Redux persistent layer (crucial for MV3).", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[2]/a"}]}, "tags": ["li"], "label": "content", "web_segment_id": 12, "global_sentence_id": 13, "edu_l1_label": "IOS"}, {"txt": "See MICE (opens in a new tab) for an experimental use case of this library integrated with WebRTC to pipe messages between browsers via an extension.", "language": "english", "position": {"atoms": [{"position_id": 939, "txt": "See ", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[3]"}, {"position_id": 941, "txt": "MICE", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[3]/a"}, {"position_id": 943, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[3]/a/span"}, {"position_id": 945, "txt": " for an experimental use case of this library integrated with WebRTC to pipe messages between browsers via an extension.", "x": "/html/body/div/div/div[2]/article/main/ul[1]/li[3]/a"}]}, "tags": ["li"], "label": "content", "web_segment_id": 13, "global_sentence_id": 14, "edu_l1_label": "IOS"}, {"txt": "Storage", "language": "english", "position": {"atoms": [{"position_id": 947, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/h2[3]"}]}, "tags": ["h2"], "label": "title1", "web_segment_id": 14, "global_sentence_id": 15, "edu_l1_label": "BOS"}, {"txt": "The base Storage API is designed to be easy to use.", "language": "english", "position": {"atoms": [{"position_id": 949, "txt": "The base Storage API is designed to be easy to use.", "x": "/html/body/div/div/div[2]/article/main/p[3]"}]}, "tags": [], "label": "content", "web_segment_id": 15, "global_sentence_id": 16, "edu_l1_label": "IOS"}, {"txt": " It is usable in every extension runtime such as background service workers, content scripts and extension pages.", "language": "english", "position": {"atoms": [{"position_id": 950, "txt": " It is usable in every extension runtime such as background service workers, content scripts and extension pages.", "x": "/html/body/div/div/div[2]/article/main/p[3]"}]}, "tags": [], "label": "content", "web_segment_id": 15, "global_sentence_id": 17, "edu_l1_label": "IOS"}, {"txt": "Get/set data without the need to JSON.stringify/parse.", "language": "english", "position": {"atoms": [{"position_id": 952, "txt": "Get/set data without the need to JSON.stringify/parse.", "x": "/html/body/div/div/div[2]/article/main/p[4]"}]}, "tags": [], "label": "content", "web_segment_id": 16, "global_sentence_id": 18, "edu_l1_label": "IOS"}, {"txt": " As long as the data you are storing is serializable (plain object or of primitive type), it can be stored:", "language": "english", "position": {"atoms": [{"position_id": 953, "txt": " As long as the data you are storing is serializable (plain object or of primitive type), it can be stored:", "x": "/html/body/div/div/div[2]/article/main/p[4]"}]}, "tags": [], "label": "content", "web_segment_id": 16, "global_sentence_id": 19, "edu_l1_label": "IOS"}, {"txt": "import { Storage } from\"@plasmohq/storage\"conststorage=newStorage()awaitstorage.set(\"key\",\"value\")constdata=awaitstorage.get(\"key\") // \"value\"awaitstorage.set(\"capt\", { color:\"", "language": "english", "position": {"atoms": [{"position_id": 955, "txt": "import", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[1]/span[1]"}, {"position_id": 957, "txt": " { Storage } ", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[1]/span[2]"}, {"position_id": 959, "txt": "from", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[1]/span[3]"}, {"position_id": 961, "txt": "\"@plasmohq/storage\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[1]/span[5]"}, {"position_id": 963, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[3]/span[1]"}, {"position_id": 965, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[3]/span[3]"}, {"position_id": 967, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[3]/span[5]"}, {"position_id": 969, "txt": "new", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[3]/span[7]"}, {"position_id": 971, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[3]/span[9]"}, {"position_id": 973, "txt": "()", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[3]/span[10]"}, {"position_id": 975, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[1]"}, {"position_id": 977, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[3]"}, {"position_id": 979, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[4]"}, {"position_id": 981, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[5]"}, {"position_id": 983, "txt": "\"key\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[6]"}, {"position_id": 985, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[7]"}, {"position_id": 987, "txt": "\"value\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[9]"}, {"position_id": 989, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[5]/span[10]"}, {"position_id": 991, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[1]"}, {"position_id": 993, "txt": "data", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[3]"}, {"position_id": 995, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[5]"}, {"position_id": 997, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[7]"}, {"position_id": 999, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[9]"}, {"position_id": 1001, "txt": ".get", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[10]"}, {"position_id": 1003, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[11]"}, {"position_id": 1005, "txt": "\"key\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[12]"}, {"position_id": 1007, "txt": ") ", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[13]"}, {"position_id": 1009, "txt": "// \"value\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[6]/span[14]"}, {"position_id": 1011, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[1]"}, {"position_id": 1013, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[3]"}, {"position_id": 1015, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[4]"}, {"position_id": 1017, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[5]"}, {"position_id": 1019, "txt": "\"capt\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[6]"}, {"position_id": 1021, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[7]"}, {"position_id": 1023, "txt": " { color", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[8]"}, {"position_id": 1025, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[9]"}, {"position_id": 1027, "txt": "\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[11]"}]}, "tags": [], "label": "code", "web_segment_id": 17, "global_sentence_id": 20, "edu_l1_label": "EDU_O"}, {"txt": "red\" })constdata2=awaitstorage.get(\"capt\") // { color: \"", "language": "english", "position": {"atoms": [{"position_id": 1028, "txt": "red\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[11]"}, {"position_id": 1030, "txt": " })", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[8]/span[12]"}, {"position_id": 1032, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[1]"}, {"position_id": 1034, "txt": "data2", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[3]"}, {"position_id": 1036, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[5]"}, {"position_id": 1038, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[7]"}, {"position_id": 1040, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[9]"}, {"position_id": 1042, "txt": ".get", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[10]"}, {"position_id": 1044, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[11]"}, {"position_id": 1046, "txt": "\"capt\"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[12]"}, {"position_id": 1048, "txt": ") ", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[13]"}, {"position_id": 1050, "txt": "// { color: \"", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[14]"}]}, "tags": [], "label": "code", "web_segment_id": 17, "global_sentence_id": 21, "edu_l1_label": "EDU_O"}, {"txt": "red\" }", "language": "english", "position": {"atoms": [{"position_id": 1051, "txt": "red\" }", "x": "/html/body/div/div/div[2]/article/main/div[3]/pre/code/span[9]/span[14]"}]}, "tags": [], "label": "code", "web_segment_id": 17, "global_sentence_id": 22, "edu_l1_label": "EDU_O"}, {"txt": "Customizing the storage area", "language": "english", "position": {"atoms": [{"position_id": 1053, "txt": "Customizing the storage area", "x": "/html/body/div/div/div[2]/article/main/h3[1]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 18, "global_sentence_id": 23, "edu_l1_label": "IOS"}, {"txt": "The storage area defaults to \"sync\", which means the data is synced across all instances of Chrome where the user is logged in.", "language": "english", "position": {"atoms": [{"position_id": 1055, "txt": "The storage area defaults to \"sync\", which means the data is synced across all instances of Chrome where the user is logged in.", "x": "/html/body/div/div/div[2]/article/main/p[5]"}]}, "tags": [], "label": "content", "web_segment_id": 19, "global_sentence_id": 24, "edu_l1_label": "IOS"}, {"txt": "You can see all of the other possible scopes Plasmo supports in the Chrome Storage API documentation (opens in a new tab).", "language": "english", "position": {"atoms": [{"position_id": 1057, "txt": "You can see all of the other possible scopes Plasmo supports in the ", "x": "/html/body/div/div/div[2]/article/main/p[6]"}, {"position_id": 1059, "txt": "Chrome Storage API documentation", "x": "/html/body/div/div/div[2]/article/main/p[6]/a"}, {"position_id": 1061, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/p[6]/a/span"}, {"position_id": 1063, "txt": ".", "x": "/html/body/div/div/div[2]/article/main/p[6]/a"}]}, "tags": [], "label": "content", "web_segment_id": 20, "global_sentence_id": 25, "edu_l1_label": "IOS"}, {"txt": "conststorage=newStorage({  area:\"", "language": "english", "position": {"atoms": [{"position_id": 1065, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[1]/span[1]"}, {"position_id": 1067, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[1]/span[3]"}, {"position_id": 1069, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[1]/span[5]"}, {"position_id": 1071, "txt": "new", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[1]/span[7]"}, {"position_id": 1073, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[1]/span[9]"}, {"position_id": 1075, "txt": "({", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[1]/span[10]"}, {"position_id": 1077, "txt": "  area", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[2]/span[1]"}, {"position_id": 1079, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[2]/span[2]"}, {"position_id": 1081, "txt": "\"", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[2]/span[4]"}]}, "tags": [], "label": "code", "web_segment_id": 21, "global_sentence_id": 26, "edu_l1_label": "EDU_O"}, {"txt": "local\"})", "language": "english", "position": {"atoms": [{"position_id": 1082, "txt": "local\"", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[2]/span[4]"}, {"position_id": 1084, "txt": "})", "x": "/html/body/div/div/div[2]/article/main/div[4]/pre/code/span[3]/span"}]}, "tags": [], "label": "code", "web_segment_id": 21, "global_sentence_id": 27, "edu_l1_label": "EDU_O"}, {"txt": "Automatically copy data to localStorage", "language": "english", "position": {"atoms": [{"position_id": 1086, "txt": "Automatically copy data to localStorage", "x": "/html/body/div/div/div[2]/article/main/h3[2]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 22, "global_sentence_id": 28, "edu_l1_label": "IOS"}, {"txt": "conststorage=newStorage({  copiedKeyList:", "language": "english", "position": {"atoms": [{"position_id": 1088, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[1]/span[1]"}, {"position_id": 1090, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[1]/span[3]"}, {"position_id": 1092, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[1]/span[5]"}, {"position_id": 1094, "txt": "new", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[1]/span[7]"}, {"position_id": 1096, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[1]/span[9]"}, {"position_id": 1098, "txt": "({", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[1]/span[10]"}, {"position_id": 1100, "txt": "  copiedKeyList", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[2]/span[1]"}, {"position_id": 1102, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[2]/span[2]"}]}, "tags": [], "label": "code", "web_segment_id": 23, "global_sentence_id": 29, "edu_l1_label": "EDU_O"}, {"txt": " [\"shield-modulation\"]})", "language": "english", "position": {"atoms": [{"position_id": 1104, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[2]/span[3]"}, {"position_id": 1106, "txt": "\"shield-modulation\"", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[2]/span[4]"}, {"position_id": 1108, "txt": "]", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[2]/span[5]"}, {"position_id": 1110, "txt": "})", "x": "/html/body/div/div/div[2]/article/main/div[5]/pre/code/span[3]/span"}]}, "tags": [], "label": "code", "web_segment_id": 23, "global_sentence_id": 30, "edu_l1_label": "EDU_O"}, {"txt": "The code above will copy the data to Web localStorage when used with content scripts or extension pages.", "language": "english", "position": {"atoms": [{"position_id": 1112, "txt": "The code above will copy the data to Web localStorage when used with content scripts or extension pages.", "x": "/html/body/div/div/div[2]/article/main/p[7]"}]}, "tags": [], "label": "content", "web_segment_id": 24, "global_sentence_id": 31, "edu_l1_label": "IOS"}, {"txt": "Watch (for state sync)", "language": "english", "position": {"atoms": [{"position_id": 1114, "txt": "Watch (for state sync)", "x": "/html/body/div/div/div[2]/article/main/h3[3]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 25, "global_sentence_id": 32, "edu_l1_label": "IOS"}, {"txt": "To watch for changes when using the Storage API:", "language": "english", "position": {"atoms": [{"position_id": 1116, "txt": "To watch for changes when using the Storage API:", "x": "/html/body/div/div/div[2]/article/main/p[8]"}]}, "tags": [], "label": "content", "web_segment_id": 26, "global_sentence_id": 33, "edu_l1_label": "IOS"}, {"txt": "background.ts", "language": "english", "position": {"atoms": [{"position_id": 1118, "txt": "background.ts", "x": "/html/body/div/div/div[2]/article/main/div[6]/div[1]"}]}, "tags": [], "label": "code", "web_segment_id": 27, "global_sentence_id": 34, "edu_l1_label": "EDU_O"}, {"txt": "import { Storage } from\"@plasmohq/storage\"conststorage=newStorage()awaitstorage.set(\"serial-number\",47)awaitstorage.set(\"make\",\"plasmo-corp\")storage.watch({\"serial-number\":", "language": "english", "position": {"atoms": [{"position_id": 1120, "txt": "import", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[1]/span[1]"}, {"position_id": 1122, "txt": " { Storage } ", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[1]/span[2]"}, {"position_id": 1124, "txt": "from", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[1]/span[3]"}, {"position_id": 1126, "txt": "\"@plasmohq/storage\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[1]/span[5]"}, {"position_id": 1128, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[3]/span[1]"}, {"position_id": 1130, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[3]/span[3]"}, {"position_id": 1132, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[3]/span[5]"}, {"position_id": 1134, "txt": "new", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[3]/span[7]"}, {"position_id": 1136, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[3]/span[9]"}, {"position_id": 1138, "txt": "()", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[3]/span[10]"}, {"position_id": 1140, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[1]"}, {"position_id": 1142, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[3]"}, {"position_id": 1144, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[4]"}, {"position_id": 1146, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[5]"}, {"position_id": 1148, "txt": "\"serial-number\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[6]"}, {"position_id": 1150, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[7]"}, {"position_id": 1152, "txt": "47", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[9]"}, {"position_id": 1154, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[5]/span[10]"}, {"position_id": 1156, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[1]"}, {"position_id": 1158, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[3]"}, {"position_id": 1160, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[4]"}, {"position_id": 1162, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[5]"}, {"position_id": 1164, "txt": "\"make\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[6]"}, {"position_id": 1166, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[7]"}, {"position_id": 1168, "txt": "\"plasmo-corp\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[9]"}, {"position_id": 1170, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[6]/span[10]"}, {"position_id": 1172, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[8]/span[1]"}, {"position_id": 1174, "txt": ".watch", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[8]/span[2]"}, {"position_id": 1176, "txt": "({", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[8]/span[3]"}, {"position_id": 1178, "txt": "\"serial-number\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[9]/span[2]"}, {"position_id": 1180, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[9]/span[3]"}]}, "tags": [], "label": "code", "web_segment_id": 28, "global_sentence_id": 35, "edu_l1_label": "EDU_O"}, {"txt": " (c) => {console.log(c.newValue)  },make:", "language": "english", "position": {"atoms": [{"position_id": 1182, "txt": " (c) ", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[9]/span[4]"}, {"position_id": 1184, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[9]/span[5]"}, {"position_id": 1186, "txt": " {", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[9]/span[6]"}, {"position_id": 1188, "txt": "console", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[10]/span[2]"}, {"position_id": 1190, "txt": ".log", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[10]/span[3]"}, {"position_id": 1192, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[10]/span[4]"}, {"position_id": 1194, "txt": "c", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[10]/span[5]"}, {"position_id": 1196, "txt": ".newValue)", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[10]/span[6]"}, {"position_id": 1198, "txt": "  }", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[11]/span[1]"}, {"position_id": 1200, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[11]/span[2]"}, {"position_id": 1202, "txt": "make", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[12]/span[2]"}, {"position_id": 1204, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[12]/span[3]"}]}, "tags": [], "label": "code", "web_segment_id": 28, "global_sentence_id": 36, "edu_l1_label": "EDU_O"}, {"txt": " (c) => {console.log(c.newValue)  }})awaitstorage.set(\"serial-number\",96)awaitstorage.set(\"make\",\"PlasmoHQ\")", "language": "english", "position": {"atoms": [{"position_id": 1206, "txt": " (c) ", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[12]/span[4]"}, {"position_id": 1208, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[12]/span[5]"}, {"position_id": 1210, "txt": " {", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[12]/span[6]"}, {"position_id": 1212, "txt": "console", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[13]/span[2]"}, {"position_id": 1214, "txt": ".log", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[13]/span[3]"}, {"position_id": 1216, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[13]/span[4]"}, {"position_id": 1218, "txt": "c", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[13]/span[5]"}, {"position_id": 1220, "txt": ".newValue)", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[13]/span[6]"}, {"position_id": 1222, "txt": "  }", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[14]/span"}, {"position_id": 1224, "txt": "})", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[15]/span"}, {"position_id": 1226, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[1]"}, {"position_id": 1228, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[3]"}, {"position_id": 1230, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[4]"}, {"position_id": 1232, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[5]"}, {"position_id": 1234, "txt": "\"serial-number\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[6]"}, {"position_id": 1236, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[7]"}, {"position_id": 1238, "txt": "96", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[9]"}, {"position_id": 1240, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[17]/span[10]"}, {"position_id": 1242, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[1]"}, {"position_id": 1244, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[3]"}, {"position_id": 1246, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[4]"}, {"position_id": 1248, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[5]"}, {"position_id": 1250, "txt": "\"make\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[6]"}, {"position_id": 1252, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[7]"}, {"position_id": 1254, "txt": "\"PlasmoHQ\"", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[9]"}, {"position_id": 1256, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[6]/pre/code/span[18]/span[10]"}]}, "tags": [], "label": "code", "web_segment_id": 28, "global_sentence_id": 37, "edu_l1_label": "EDU_O"}, {"txt": "This can be used as a layer to communicate messages across your extension.", "language": "english", "position": {"atoms": [{"position_id": 1258, "txt": "This can be used as a layer to communicate messages across your extension.", "x": "/html/body/div/div/div[2]/article/main/p[9]"}]}, "tags": [], "label": "content", "web_segment_id": 29, "global_sentence_id": 38, "edu_l1_label": "IOS"}, {"txt": " We demonstrate this in the with-redux (opens in a new tab) example.", "language": "english", "position": {"atoms": [{"position_id": 1259, "txt": " We demonstrate this in the ", "x": "/html/body/div/div/div[2]/article/main/p[9]"}, {"position_id": 1261, "txt": "with-redux", "x": "/html/body/div/div/div[2]/article/main/p[9]/a"}, {"position_id": 1263, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/p[9]/a/span"}, {"position_id": 1265, "txt": " example.", "x": "/html/body/div/div/div[2]/article/main/p[9]/a"}]}, "tags": [], "label": "content", "web_segment_id": 29, "global_sentence_id": 39, "edu_l1_label": "IOS"}, {"txt": "📢", "language": "english", "position": {"atoms": [{"position_id": 1267, "txt": "📢", "x": "/html/body/div/div/div[2]/article/main/div[7]/div[1]"}]}, "tags": [], "label": "O", "web_segment_id": 30, "global_sentence_id": 40, "edu_l1_label": "EDU_O"}, {"txt": "NOTE:", "language": "english", "position": {"atoms": [{"position_id": 1269, "txt": "NOTE:", "x": "/html/body/div/div/div[2]/article/main/div[7]/div[2]/p/strong"}]}, "tags": ["strong"], "label": "content", "web_segment_id": 31, "global_sentence_id": 41, "edu_l1_label": "IOS"}, {"txt": " The Storage API is not available in a Content Script when it is executed in the 'MAIN' world, as it loses its access to the Chrome Extensions APIs.", "language": "english", "position": {"atoms": [{"position_id": 1271, "txt": " The Storage API is not available in a Content Script when it is executed in the 'MAIN' world, as it loses its access to the Chrome Extensions APIs.", "x": "/html/body/div/div/div[2]/article/main/div[7]/div[2]/p/strong"}]}, "tags": ["strong"], "label": "content", "web_segment_id": 31, "global_sentence_id": 42, "edu_l1_label": "IOS"}, {"txt": "Secure Storage", "language": "english", "position": {"atoms": [{"position_id": 1273, "txt": "Secure Storage", "x": "/html/body/div/div/div[2]/article/main/h2[4]"}]}, "tags": ["h2"], "label": "title1", "web_segment_id": 32, "global_sentence_id": 43, "edu_l1_label": "BOS"}, {"txt": "The SecureStorage API extends Storage with data encryption and decryption for at-rest cold storage of sensitive keys.", "language": "english", "position": {"atoms": [{"position_id": 1275, "txt": "The SecureStorage API extends Storage with data encryption and decryption for at-rest cold storage of sensitive keys.", "x": "/html/body/div/div/div[2]/article/main/p[10]"}]}, "tags": [], "label": "content", "web_segment_id": 33, "global_sentence_id": 44, "edu_l1_label": "IOS"}, {"txt": " It utilizes the Web Crypto SubtleCrypto API (opens in a new tab) which only works in secure contexts (HTTPS).", "language": "english", "position": {"atoms": [{"position_id": 1276, "txt": " It utilizes the ", "x": "/html/body/div/div/div[2]/article/main/p[10]"}, {"position_id": 1278, "txt": "Web Crypto ", "x": "/html/body/div/div/div[2]/article/main/p[10]/a"}, {"position_id": 1280, "txt": "SubtleCrypto", "x": "/html/body/div/div/div[2]/article/main/p[10]/a/code"}, {"position_id": 1282, "txt": " API", "x": "/html/body/div/div/div[2]/article/main/p[10]/a/code"}, {"position_id": 1284, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/p[10]/a/span"}, {"position_id": 1286, "txt": " which only works in secure contexts (HTTPS).", "x": "/html/body/div/div/div[2]/article/main/p[10]/a"}]}, "tags": [], "label": "content", "web_segment_id": 33, "global_sentence_id": 45, "edu_l1_label": "IOS"}, {"txt": "import { SecureStorage } from\"@plasmohq/storage/secure\"conststorage=newSecureStorage()awaitstorage.setPassword(\"roosevelt\") // The only diffawaitstorage.set(\"key\",\"value\")constdata=awaitstorage.get(\"key\") // \"value\"awaitstorage.set(\"capt\", { color:\"", "language": "english", "position": {"atoms": [{"position_id": 1288, "txt": "import", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[1]/span[1]"}, {"position_id": 1290, "txt": " { SecureStorage } ", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[1]/span[2]"}, {"position_id": 1292, "txt": "from", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[1]/span[3]"}, {"position_id": 1294, "txt": "\"@plasmohq/storage/secure\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[1]/span[5]"}, {"position_id": 1296, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[3]/span[1]"}, {"position_id": 1298, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[3]/span[3]"}, {"position_id": 1300, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[3]/span[5]"}, {"position_id": 1302, "txt": "new", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[3]/span[7]"}, {"position_id": 1304, "txt": "SecureStorage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[3]/span[9]"}, {"position_id": 1306, "txt": "()", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[3]/span[10]"}, {"position_id": 1308, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[1]"}, {"position_id": 1310, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[3]"}, {"position_id": 1312, "txt": ".setPassword", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[4]"}, {"position_id": 1314, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[5]"}, {"position_id": 1316, "txt": "\"roosevelt\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[6]"}, {"position_id": 1318, "txt": ") ", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[7]"}, {"position_id": 1320, "txt": "// The only diff", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[5]/span[8]"}, {"position_id": 1322, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[1]"}, {"position_id": 1324, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[3]"}, {"position_id": 1326, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[4]"}, {"position_id": 1328, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[5]"}, {"position_id": 1330, "txt": "\"key\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[6]"}, {"position_id": 1332, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[7]"}, {"position_id": 1334, "txt": "\"value\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[9]"}, {"position_id": 1336, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[7]/span[10]"}, {"position_id": 1338, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[1]"}, {"position_id": 1340, "txt": "data", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[3]"}, {"position_id": 1342, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[5]"}, {"position_id": 1344, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[7]"}, {"position_id": 1346, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[9]"}, {"position_id": 1348, "txt": ".get", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[10]"}, {"position_id": 1350, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[11]"}, {"position_id": 1352, "txt": "\"key\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[12]"}, {"position_id": 1354, "txt": ") ", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[13]"}, {"position_id": 1356, "txt": "// \"value\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[8]/span[14]"}, {"position_id": 1358, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[1]"}, {"position_id": 1360, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[3]"}, {"position_id": 1362, "txt": ".set", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[4]"}, {"position_id": 1364, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[5]"}, {"position_id": 1366, "txt": "\"capt\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[6]"}, {"position_id": 1368, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[7]"}, {"position_id": 1370, "txt": " { color", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[8]"}, {"position_id": 1372, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[9]"}, {"position_id": 1374, "txt": "\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[11]"}]}, "tags": [], "label": "code", "web_segment_id": 34, "global_sentence_id": 46, "edu_l1_label": "EDU_O"}, {"txt": "red\" })constdata2=awaitstorage.get(\"capt\") // { color: \"", "language": "english", "position": {"atoms": [{"position_id": 1375, "txt": "red\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[11]"}, {"position_id": 1377, "txt": " })", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[10]/span[12]"}, {"position_id": 1379, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[1]"}, {"position_id": 1381, "txt": "data2", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[3]"}, {"position_id": 1383, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[5]"}, {"position_id": 1385, "txt": "await", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[7]"}, {"position_id": 1387, "txt": "storage", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[9]"}, {"position_id": 1389, "txt": ".get", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[10]"}, {"position_id": 1391, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[11]"}, {"position_id": 1393, "txt": "\"capt\"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[12]"}, {"position_id": 1395, "txt": ") ", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[13]"}, {"position_id": 1397, "txt": "// { color: \"", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[14]"}]}, "tags": [], "label": "code", "web_segment_id": 34, "global_sentence_id": 47, "edu_l1_label": "EDU_O"}, {"txt": "red\" }", "language": "english", "position": {"atoms": [{"position_id": 1398, "txt": "red\" }", "x": "/html/body/div/div/div[2]/article/main/div[8]/pre/code/span[11]/span[14]"}]}, "tags": [], "label": "code", "web_segment_id": 34, "global_sentence_id": 48, "edu_l1_label": "EDU_O"}, {"txt": "React Hook API", "language": "english", "position": {"atoms": [{"position_id": 1400, "txt": "React Hook API", "x": "/html/body/div/div/div[2]/article/main/h2[5]"}]}, "tags": ["h2"], "label": "title1", "web_segment_id": 35, "global_sentence_id": 49, "edu_l1_label": "BOS"}, {"txt": "The hook API is designed to streamline the state-syncing workflow between the different pieces of an extension.", "language": "english", "position": {"atoms": [{"position_id": 1402, "txt": "The hook API is designed to streamline the state-syncing workflow between the different pieces of an extension.", "x": "/html/body/div/div/div[2]/article/main/p[11]"}]}, "tags": [], "label": "content", "web_segment_id": 36, "global_sentence_id": 50, "edu_l1_label": "IOS"}, {"txt": " There are many ways it can be used, but first and foremost you will want to import the hook into your React component:", "language": "english", "position": {"atoms": [{"position_id": 1403, "txt": " There are many ways it can be used, but first and foremost you will want to import the hook into your React component:", "x": "/html/body/div/div/div[2]/article/main/p[11]"}]}, "tags": [], "label": "content", "web_segment_id": 36, "global_sentence_id": 51, "edu_l1_label": "IOS"}, {"txt": "import { useStorage } from\"@plasmohq/storage/hook\"", "language": "english", "position": {"atoms": [{"position_id": 1405, "txt": "import", "x": "/html/body/div/div/div[2]/article/main/div[9]/pre/code/span/span[1]"}, {"position_id": 1407, "txt": " { useStorage } ", "x": "/html/body/div/div/div[2]/article/main/div[9]/pre/code/span/span[2]"}, {"position_id": 1409, "txt": "from", "x": "/html/body/div/div/div[2]/article/main/div[9]/pre/code/span/span[3]"}, {"position_id": 1411, "txt": "\"@plasmohq/storage/hook\"", "x": "/html/body/div/div/div[2]/article/main/div[9]/pre/code/span/span[5]"}]}, "tags": [], "label": "code", "web_segment_id": 37, "global_sentence_id": 52, "edu_l1_label": "EDU_O"}, {"txt": "Watch and render a value", "language": "english", "position": {"atoms": [{"position_id": 1413, "txt": "Watch and render a value", "x": "/html/body/div/div/div[2]/article/main/h3[4]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 38, "global_sentence_id": 53, "edu_l1_label": "IOS"}, {"txt": "const [hailingFrequency] =useStorage(\"hailing\")...{hailingFrequency}", "language": "english", "position": {"atoms": [{"position_id": 1415, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[1]"}, {"position_id": 1417, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[2]"}, {"position_id": 1419, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[3]"}, {"position_id": 1421, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[4]"}, {"position_id": 1423, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[5]"}, {"position_id": 1425, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[7]"}, {"position_id": 1427, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[8]"}, {"position_id": 1429, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[9]"}, {"position_id": 1431, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[1]/span[10]"}, {"position_id": 1433, "txt": "...", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[2]/span"}, {"position_id": 1435, "txt": "{hailingFrequency}", "x": "/html/body/div/div/div[2]/article/main/div[10]/pre/code/span[3]/span"}]}, "tags": [], "label": "code", "web_segment_id": 39, "global_sentence_id": 54, "edu_l1_label": "EDU_O"}, {"txt": "With a custom storage instance", "language": "english", "position": {"atoms": [{"position_id": 1437, "txt": "With a custom storage instance", "x": "/html/body/div/div/div[2]/article/main/h3[5]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 40, "global_sentence_id": 55, "edu_l1_label": "IOS"}, {"txt": "import { Storage } from\"@plasmohq/storage\"...const [hailingFrequency] =useStorage({  key:\"", "language": "english", "position": {"atoms": [{"position_id": 1439, "txt": "import", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[1]/span[1]"}, {"position_id": 1441, "txt": " { Storage } ", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[1]/span[2]"}, {"position_id": 1443, "txt": "from", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[1]/span[3]"}, {"position_id": 1445, "txt": "\"@plasmohq/storage\"", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[1]/span[5]"}, {"position_id": 1447, "txt": "...", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[2]/span"}, {"position_id": 1449, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[1]"}, {"position_id": 1451, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[2]"}, {"position_id": 1453, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[3]"}, {"position_id": 1455, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[4]"}, {"position_id": 1457, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[5]"}, {"position_id": 1459, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[7]"}, {"position_id": 1461, "txt": "({", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[3]/span[8]"}, {"position_id": 1463, "txt": "  key", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[4]/span[1]"}, {"position_id": 1465, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[4]/span[2]"}, {"position_id": 1467, "txt": "\"", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[4]/span[4]"}]}, "tags": [], "label": "code", "web_segment_id": 41, "global_sentence_id": 56, "edu_l1_label": "EDU_O"}, {"txt": "hailing\",  instance:", "language": "english", "position": {"atoms": [{"position_id": 1468, "txt": "hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[4]/span[4]"}, {"position_id": 1470, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[4]/span[5]"}, {"position_id": 1472, "txt": "  instance", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[5]/span[1]"}, {"position_id": 1474, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[5]/span[2]"}]}, "tags": [], "label": "code", "web_segment_id": 41, "global_sentence_id": 57, "edu_l1_label": "EDU_O"}, {"txt": "newStorage({    area:\"", "language": "english", "position": {"atoms": [{"position_id": 1476, "txt": "new", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[5]/span[4]"}, {"position_id": 1478, "txt": "Storage", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[5]/span[6]"}, {"position_id": 1480, "txt": "({", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[5]/span[7]"}, {"position_id": 1482, "txt": "    area", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[6]/span[1]"}, {"position_id": 1484, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[6]/span[2]"}, {"position_id": 1486, "txt": "\"", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[6]/span[4]"}]}, "tags": [], "label": "code", "web_segment_id": 41, "global_sentence_id": 58, "edu_l1_label": "EDU_O"}, {"txt": "local\"  })})", "language": "english", "position": {"atoms": [{"position_id": 1487, "txt": "local\"", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[6]/span[4]"}, {"position_id": 1489, "txt": "  })", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[7]/span"}, {"position_id": 1491, "txt": "})", "x": "/html/body/div/div/div[2]/article/main/div[11]/pre/code/span[8]/span"}]}, "tags": [], "label": "code", "web_segment_id": 41, "global_sentence_id": 59, "edu_l1_label": "EDU_O"}, {"txt": "Rendering initial value WITHOUT persisting", "language": "english", "position": {"atoms": [{"position_id": 1493, "txt": "Rendering initial value WITHOUT persisting", "x": "/html/body/div/div/div[2]/article/main/h3[6]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 42, "global_sentence_id": 60, "edu_l1_label": "IOS"}, {"txt": "\"Persisting\" means writing into the internal memory.", "language": "english", "position": {"atoms": [{"position_id": 1495, "txt": "\"Persisting\" means writing into the internal memory.", "x": "/html/body/div/div/div[2]/article/main/p[12]"}]}, "tags": [], "label": "content", "web_segment_id": 43, "global_sentence_id": 61, "edu_l1_label": "IOS"}, {"txt": "By not persisting the value, only this specific instance of the hook will render the given initial value when there is no value in storage.", "language": "english", "position": {"atoms": [{"position_id": 1497, "txt": "By not persisting the value, only this specific instance of the hook will render the given initial value when there is no value in storage.", "x": "/html/body/div/div/div[2]/article/main/p[13]"}]}, "tags": [], "label": "content", "web_segment_id": 44, "global_sentence_id": 62, "edu_l1_label": "IOS"}, {"txt": " Other instances can either show undefined OR specify their own initial value.", "language": "english", "position": {"atoms": [{"position_id": 1498, "txt": " Other instances can either show ", "x": "/html/body/div/div/div[2]/article/main/p[13]"}, {"position_id": 1500, "txt": "undefined", "x": "/html/body/div/div/div[2]/article/main/p[13]/code"}, {"position_id": 1502, "txt": " OR specify their own initial value.", "x": "/html/body/div/div/div[2]/article/main/p[13]/code"}]}, "tags": [], "label": "content", "web_segment_id": 44, "global_sentence_id": 63, "edu_l1_label": "IOS"}, {"txt": " To elaborate on this:", "language": "english", "position": {"atoms": [{"position_id": 1503, "txt": " To elaborate on this:", "x": "/html/body/div/div/div[2]/article/main/p[13]/code"}]}, "tags": [], "label": "content", "web_segment_id": 44, "global_sentence_id": 64, "edu_l1_label": "IOS"}, {"txt": "Given a popup.tsx that sets a static initial value:", "language": "english", "position": {"atoms": [{"position_id": 1505, "txt": "Given a ", "x": "/html/body/div/div/div[2]/article/main/p[14]"}, {"position_id": 1507, "txt": "popup.tsx", "x": "/html/body/div/div/div[2]/article/main/p[14]/code"}, {"position_id": 1509, "txt": " that sets a static initial value:", "x": "/html/body/div/div/div[2]/article/main/p[14]/code"}]}, "tags": [], "label": "content", "web_segment_id": 45, "global_sentence_id": 65, "edu_l1_label": "IOS"}, {"txt": "popup.tsx", "language": "english", "position": {"atoms": [{"position_id": 1511, "txt": "popup.tsx", "x": "/html/body/div/div/div[2]/article/main/div[12]/div[1]"}]}, "tags": [], "label": "code", "web_segment_id": 46, "global_sentence_id": 66, "edu_l1_label": "EDU_O"}, {"txt": "const [hailingFrequency,setHailingFrequency] =useStorage(\"hailing\",\"42\")...<inputvalue={hailingFrequency} onChange={(e) =>setHailingFrequency(e.target.value)  }/> // \"42\"", "language": "english", "position": {"atoms": [{"position_id": 1513, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[1]"}, {"position_id": 1515, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[2]"}, {"position_id": 1517, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[3]"}, {"position_id": 1519, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[4]"}, {"position_id": 1521, "txt": "setHailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[6]"}, {"position_id": 1523, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[7]"}, {"position_id": 1525, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[8]"}, {"position_id": 1527, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[10]"}, {"position_id": 1529, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[11]"}, {"position_id": 1531, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[12]"}, {"position_id": 1533, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[13]"}, {"position_id": 1535, "txt": "\"42\"", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[15]"}, {"position_id": 1537, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[1]/span[16]"}, {"position_id": 1539, "txt": "...", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[2]/span"}, {"position_id": 1541, "txt": "<", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[1]"}, {"position_id": 1543, "txt": "input", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[2]"}, {"position_id": 1545, "txt": "value", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[4]"}, {"position_id": 1547, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[5]"}, {"position_id": 1549, "txt": "{hailingFrequency} ", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[6]"}, {"position_id": 1551, "txt": "onChange", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[7]"}, {"position_id": 1553, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[8]"}, {"position_id": 1555, "txt": "{(e) ", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[9]"}, {"position_id": 1557, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[3]/span[10]"}, {"position_id": 1559, "txt": "setHailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[4]/span[2]"}, {"position_id": 1561, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[4]/span[3]"}, {"position_id": 1563, "txt": "e", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[4]/span[4]"}, {"position_id": 1565, "txt": ".", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[4]/span[5]"}, {"position_id": 1567, "txt": "target", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[4]/span[6]"}, {"position_id": 1569, "txt": ".value)", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[4]/span[7]"}, {"position_id": 1571, "txt": "  }/> ", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[5]/span[1]"}, {"position_id": 1573, "txt": "// \"42\"", "x": "/html/body/div/div/div[2]/article/main/div[12]/pre/code/span[5]/span[2]"}]}, "tags": [], "label": "code", "web_segment_id": 47, "global_sentence_id": 67, "edu_l1_label": "EDU_O"}, {"txt": "If we subscribe to this key in content.tsx, we will see it be undefined until setHailingFrequency is called with a defined value:", "language": "english", "position": {"atoms": [{"position_id": 1575, "txt": "If we subscribe to this key in ", "x": "/html/body/div/div/div[2]/article/main/p[15]"}, {"position_id": 1577, "txt": "content.tsx", "x": "/html/body/div/div/div[2]/article/main/p[15]/code[1]"}, {"position_id": 1579, "txt": ", we will see it be ", "x": "/html/body/div/div/div[2]/article/main/p[15]/code[1]"}, {"position_id": 1581, "txt": "undefined", "x": "/html/body/div/div/div[2]/article/main/p[15]/code[2]"}, {"position_id": 1583, "txt": " until ", "x": "/html/body/div/div/div[2]/article/main/p[15]/code[2]"}, {"position_id": 1585, "txt": "setHailingFrequency", "x": "/html/body/div/div/div[2]/article/main/p[15]/code[3]"}, {"position_id": 1587, "txt": " is called with a defined value:", "x": "/html/body/div/div/div[2]/article/main/p[15]/code[3]"}]}, "tags": [], "label": "content", "web_segment_id": 48, "global_sentence_id": 68, "edu_l1_label": "IOS"}, {"txt": "content.tsx", "language": "english", "position": {"atoms": [{"position_id": 1589, "txt": "content.tsx", "x": "/html/body/div/div/div[2]/article/main/div[13]/div[1]"}]}, "tags": [], "label": "code", "web_segment_id": 49, "global_sentence_id": 69, "edu_l1_label": "EDU_O"}, {"txt": "const [hailingFrequency] =useStorage(\"hailing\")return <p>{hailingFrequency}</p> // undefined", "language": "english", "position": {"atoms": [{"position_id": 1591, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[1]"}, {"position_id": 1593, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[2]"}, {"position_id": 1595, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[3]"}, {"position_id": 1597, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[4]"}, {"position_id": 1599, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[5]"}, {"position_id": 1601, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[7]"}, {"position_id": 1603, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[8]"}, {"position_id": 1605, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[9]"}, {"position_id": 1607, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[1]/span[10]"}, {"position_id": 1609, "txt": "return", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[1]"}, {"position_id": 1611, "txt": " <", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[2]"}, {"position_id": 1613, "txt": "p", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[3]"}, {"position_id": 1615, "txt": ">{hailingFrequency}</", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[4]"}, {"position_id": 1617, "txt": "p", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[5]"}, {"position_id": 1619, "txt": "> ", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[6]"}, {"position_id": 1621, "txt": "// undefined", "x": "/html/body/div/div/div[2]/article/main/div[13]/pre/code/span[3]/span[7]"}]}, "tags": [], "label": "code", "web_segment_id": 50, "global_sentence_id": 70, "edu_l1_label": "EDU_O"}, {"txt": "If we subscribe to this key in options.tsx, but with a different static initial value, we will see that value instead:", "language": "english", "position": {"atoms": [{"position_id": 1623, "txt": "If we subscribe to this key in ", "x": "/html/body/div/div/div[2]/article/main/p[16]"}, {"position_id": 1625, "txt": "options.tsx", "x": "/html/body/div/div/div[2]/article/main/p[16]/code"}, {"position_id": 1627, "txt": ", but with a different static initial value, we will see that value instead:", "x": "/html/body/div/div/div[2]/article/main/p[16]/code"}]}, "tags": [], "label": "content", "web_segment_id": 51, "global_sentence_id": 71, "edu_l1_label": "IOS"}, {"txt": "options.tsx", "language": "english", "position": {"atoms": [{"position_id": 1629, "txt": "options.tsx", "x": "/html/body/div/div/div[2]/article/main/div[14]/div[1]"}]}, "tags": [], "label": "code", "web_segment_id": 52, "global_sentence_id": 72, "edu_l1_label": "EDU_O"}, {"txt": "const [hailingFrequency] =useStorage(\"hailing\",\"147\")return <p>{hailingFrequency}</p> // \"147\"", "language": "english", "position": {"atoms": [{"position_id": 1631, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[1]"}, {"position_id": 1633, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[2]"}, {"position_id": 1635, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[3]"}, {"position_id": 1637, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[4]"}, {"position_id": 1639, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[5]"}, {"position_id": 1641, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[7]"}, {"position_id": 1643, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[8]"}, {"position_id": 1645, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[9]"}, {"position_id": 1647, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[10]"}, {"position_id": 1649, "txt": "\"147\"", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[12]"}, {"position_id": 1651, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[1]/span[13]"}, {"position_id": 1653, "txt": "return", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[1]"}, {"position_id": 1655, "txt": " <", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[2]"}, {"position_id": 1657, "txt": "p", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[3]"}, {"position_id": 1659, "txt": ">{hailingFrequency}</", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[4]"}, {"position_id": 1661, "txt": "p", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[5]"}, {"position_id": 1663, "txt": "> ", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[6]"}, {"position_id": 1665, "txt": "// \"147\"", "x": "/html/body/div/div/div[2]/article/main/div[14]/pre/code/span[3]/span[7]"}]}, "tags": [], "label": "code", "web_segment_id": 53, "global_sentence_id": 73, "edu_l1_label": "EDU_O"}, {"txt": "With the above setup, suppose we call setHailingFrequency(\"8472\") in any of the instances above, we will see that all instances will now show \"8472\" and will now track the value in storage instead of the initial value.", "language": "english", "position": {"atoms": [{"position_id": 1667, "txt": "With the above setup, suppose we call ", "x": "/html/body/div/div/div[2]/article/main/p[17]"}, {"position_id": 1669, "txt": "setHailingFrequency(\"8472\")", "x": "/html/body/div/div/div[2]/article/main/p[17]/code"}, {"position_id": 1671, "txt": " in any of the instances above, we will see that all instances will now show \"8472\" and will now track the value in storage instead of the initial value.", "x": "/html/body/div/div/div[2]/article/main/p[17]/code"}]}, "tags": [], "label": "content", "web_segment_id": 54, "global_sentence_id": 74, "edu_l1_label": "IOS"}, {"txt": "Rendering AND persisting initial value", "language": "english", "position": {"atoms": [{"position_id": 1673, "txt": "Rendering AND persisting initial value", "x": "/html/body/div/div/div[2]/article/main/h3[7]"}]}, "tags": ["h3"], "label": "content", "web_segment_id": 55, "global_sentence_id": 75, "edu_l1_label": "IOS"}, {"txt": "By using a function instead of a static value, the initial value will be persisted in storage memory.", "language": "english", "position": {"atoms": [{"position_id": 1675, "txt": "By using a function instead of a static value, the initial value will be persisted in storage memory.", "x": "/html/body/div/div/div[2]/article/main/p[18]"}]}, "tags": [], "label": "content", "web_segment_id": 56, "global_sentence_id": 76, "edu_l1_label": "IOS"}, {"txt": " The initialize function has one parameter which is the existing value in storage.", "language": "english", "position": {"atoms": [{"position_id": 1676, "txt": " The initialize function has one parameter which is the existing value in storage.", "x": "/html/body/div/div/div[2]/article/main/p[18]"}]}, "tags": [], "label": "content", "web_segment_id": 56, "global_sentence_id": 77, "edu_l1_label": "IOS"}, {"txt": " If there is no value, it is undefined.", "language": "english", "position": {"atoms": [{"position_id": 1677, "txt": " If there is no value, it is ", "x": "/html/body/div/div/div[2]/article/main/p[18]"}, {"position_id": 1679, "txt": "undefined", "x": "/html/body/div/div/div[2]/article/main/p[18]/code"}, {"position_id": 1681, "txt": ".", "x": "/html/body/div/div/div[2]/article/main/p[18]/code"}]}, "tags": [], "label": "content", "web_segment_id": 56, "global_sentence_id": 78, "edu_l1_label": "IOS"}, {"txt": "Let's say we have a popup.tsx that initialize the state to \"42\" if there is nothing in storage:", "language": "english", "position": {"atoms": [{"position_id": 1683, "txt": "Let's say we have a ", "x": "/html/body/div/div/div[2]/article/main/p[19]"}, {"position_id": 1685, "txt": "popup.tsx", "x": "/html/body/div/div/div[2]/article/main/p[19]/code"}, {"position_id": 1687, "txt": " that initialize the state to \"42\" if there is nothing in storage:", "x": "/html/body/div/div/div[2]/article/main/p[19]/code"}]}, "tags": [], "label": "content", "web_segment_id": 57, "global_sentence_id": 79, "edu_l1_label": "IOS"}, {"txt": "popup.tsx", "language": "english", "position": {"atoms": [{"position_id": 1689, "txt": "popup.tsx", "x": "/html/body/div/div/div[2]/article/main/div[15]/div[1]"}]}, "tags": [], "label": "code", "web_segment_id": 58, "global_sentence_id": 80, "edu_l1_label": "EDU_O"}, {"txt": "const [hailingFrequency,setHailingFrequency] =useStorage(\"hailing\", (v) => v ===undefined?\"42\":", "language": "english", "position": {"atoms": [{"position_id": 1691, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[1]"}, {"position_id": 1693, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[2]"}, {"position_id": 1695, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[3]"}, {"position_id": 1697, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[4]"}, {"position_id": 1699, "txt": "setHailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[6]"}, {"position_id": 1701, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[7]"}, {"position_id": 1703, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[8]"}, {"position_id": 1705, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[10]"}, {"position_id": 1707, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[11]"}, {"position_id": 1709, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[12]"}, {"position_id": 1711, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[13]"}, {"position_id": 1713, "txt": " (v) ", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[14]"}, {"position_id": 1715, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[15]"}, {"position_id": 1717, "txt": " v ", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[16]"}, {"position_id": 1719, "txt": "===", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[17]"}, {"position_id": 1721, "txt": "undefined", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[19]"}, {"position_id": 1723, "txt": "?", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[21]"}, {"position_id": 1725, "txt": "\"42\"", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[23]"}, {"position_id": 1727, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[24]"}]}, "tags": [], "label": "code", "web_segment_id": 59, "global_sentence_id": 81, "edu_l1_label": "EDU_O"}, {"txt": " v)...{hailingFrequency} // \"42\"", "language": "english", "position": {"atoms": [{"position_id": 1729, "txt": " v)", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[1]/span[25]"}, {"position_id": 1731, "txt": "...", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[2]/span"}, {"position_id": 1733, "txt": "{hailingFrequency} ", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[3]/span[1]"}, {"position_id": 1735, "txt": "// \"42\"", "x": "/html/body/div/div/div[2]/article/main/div[15]/pre/code/span[3]/span[2]"}]}, "tags": [], "label": "code", "web_segment_id": 59, "global_sentence_id": 82, "edu_l1_label": "EDU_O"}, {"txt": "Then, if we make a new hook instance in our content.tsx or options.tsx, we will see the initial value that persisted, without calling setHailingFrequency:", "language": "english", "position": {"atoms": [{"position_id": 1737, "txt": "Then, if we make a new hook instance in our ", "x": "/html/body/div/div/div[2]/article/main/p[20]"}, {"position_id": 1739, "txt": "content.tsx", "x": "/html/body/div/div/div[2]/article/main/p[20]/code[1]"}, {"position_id": 1741, "txt": " or ", "x": "/html/body/div/div/div[2]/article/main/p[20]/code[1]"}, {"position_id": 1743, "txt": "options.tsx", "x": "/html/body/div/div/div[2]/article/main/p[20]/code[2]"}, {"position_id": 1745, "txt": ", we will see the initial value that persisted, without calling ", "x": "/html/body/div/div/div[2]/article/main/p[20]/code[2]"}, {"position_id": 1747, "txt": "setHailingFrequency", "x": "/html/body/div/div/div[2]/article/main/p[20]/code[3]"}, {"position_id": 1749, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/p[20]/code[3]"}]}, "tags": [], "label": "content", "web_segment_id": 60, "global_sentence_id": 83, "edu_l1_label": "IOS"}, {"txt": "content.tsx", "language": "english", "position": {"atoms": [{"position_id": 1751, "txt": "content.tsx", "x": "/html/body/div/div/div[2]/article/main/div[16]/div[1]"}]}, "tags": [], "label": "code", "web_segment_id": 61, "global_sentence_id": 84, "edu_l1_label": "EDU_O"}, {"txt": "const [hailingFrequency] =useStorage(\"hailing\")return <p>{hailingFrequency}</p> // \"42\"", "language": "english", "position": {"atoms": [{"position_id": 1753, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[1]"}, {"position_id": 1755, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[2]"}, {"position_id": 1757, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[3]"}, {"position_id": 1759, "txt": "] ", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[4]"}, {"position_id": 1761, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[5]"}, {"position_id": 1763, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[7]"}, {"position_id": 1765, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[8]"}, {"position_id": 1767, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[9]"}, {"position_id": 1769, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[1]/span[10]"}, {"position_id": 1771, "txt": "return", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[1]"}, {"position_id": 1773, "txt": " <", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[2]"}, {"position_id": 1775, "txt": "p", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[3]"}, {"position_id": 1777, "txt": ">{hailingFrequency}</", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[4]"}, {"position_id": 1779, "txt": "p", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[5]"}, {"position_id": 1781, "txt": "> ", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[6]"}, {"position_id": 1783, "txt": "// \"42\"", "x": "/html/body/div/div/div[2]/article/main/div[16]/pre/code/span[3]/span[7]"}]}, "tags": [], "label": "code", "web_segment_id": 62, "global_sentence_id": 85, "edu_l1_label": "EDU_O"}, {"txt": "Advanced usage", "language": "english", "position": {"atoms": [{"position_id": 1785, "txt": "Advanced usage", "x": "/html/body/div/div/div[2]/article/main/h3[8]"}]}, "tags": ["h3"], "label": "title2", "web_segment_id": 63, "global_sentence_id": 86, "edu_l1_label": "IOS"}, {"txt": "When dealing with form input or real-time input, you might need the following:", "language": "english", "position": {"atoms": [{"position_id": 1787, "txt": "When dealing with form input or real-time input, you might need the following:", "x": "/html/body/div/div/div[2]/article/main/p[21]"}]}, "tags": [], "label": "content", "web_segment_id": 64, "global_sentence_id": 87, "edu_l1_label": "IOS"}, {"txt": "const [hailingFrequency,setHailingFrequency, {setRenderValue,setStoreValue,remove}] =useStorage(\"hailing\")return <>  <inputvalue={hailingFrequency} onChange={(e) =>setRenderValue(e.target.value)}/>  <buttononClick={() =>setStoreValue()}>    Save  </button>  <buttononClick={() =>remove()}>    Remove  </button></>", "language": "english", "position": {"atoms": [{"position_id": 1789, "txt": "const", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[1]"}, {"position_id": 1791, "txt": " [", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[2]"}, {"position_id": 1793, "txt": "hailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[3]"}, {"position_id": 1795, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[4]"}, {"position_id": 1797, "txt": "setHailingFrequency", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[6]"}, {"position_id": 1799, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[7]"}, {"position_id": 1801, "txt": " {", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[1]/span[8]"}, {"position_id": 1803, "txt": "setRenderValue", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[2]/span[2]"}, {"position_id": 1805, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[2]/span[3]"}, {"position_id": 1807, "txt": "setStoreValue", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[3]/span[2]"}, {"position_id": 1809, "txt": ",", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[3]/span[3]"}, {"position_id": 1811, "txt": "remove", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[4]/span[2]"}, {"position_id": 1813, "txt": "}] ", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[5]/span[1]"}, {"position_id": 1815, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[5]/span[2]"}, {"position_id": 1817, "txt": "useStorage", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[5]/span[4]"}, {"position_id": 1819, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[5]/span[5]"}, {"position_id": 1821, "txt": "\"hailing\"", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[5]/span[6]"}, {"position_id": 1823, "txt": ")", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[5]/span[7]"}, {"position_id": 1825, "txt": "return", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[7]/span[1]"}, {"position_id": 1827, "txt": " <>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[7]/span[2]"}, {"position_id": 1829, "txt": "  <", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[1]"}, {"position_id": 1831, "txt": "input", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[2]"}, {"position_id": 1833, "txt": "value", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[4]"}, {"position_id": 1835, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[5]"}, {"position_id": 1837, "txt": "{hailingFrequency} ", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[6]"}, {"position_id": 1839, "txt": "onChange", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[7]"}, {"position_id": 1841, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[8]"}, {"position_id": 1843, "txt": "{(e) ", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[9]"}, {"position_id": 1845, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[10]"}, {"position_id": 1847, "txt": "setRenderValue", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[12]"}, {"position_id": 1849, "txt": "(", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[13]"}, {"position_id": 1851, "txt": "e", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[14]"}, {"position_id": 1853, "txt": ".", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[15]"}, {"position_id": 1855, "txt": "target", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[16]"}, {"position_id": 1857, "txt": ".value)}/>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[8]/span[17]"}, {"position_id": 1859, "txt": "  <", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[1]"}, {"position_id": 1861, "txt": "button", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[2]"}, {"position_id": 1863, "txt": "onClick", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[4]"}, {"position_id": 1865, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[5]"}, {"position_id": 1867, "txt": "{() ", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[6]"}, {"position_id": 1869, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[7]"}, {"position_id": 1871, "txt": "setStoreValue", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[9]"}, {"position_id": 1873, "txt": "()}>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[9]/span[10]"}, {"position_id": 1875, "txt": "    Save", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[10]/span"}, {"position_id": 1877, "txt": "  </", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[11]/span[1]"}, {"position_id": 1879, "txt": "button", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[11]/span[2]"}, {"position_id": 1881, "txt": ">", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[11]/span[3]"}, {"position_id": 1883, "txt": "  <", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[1]"}, {"position_id": 1885, "txt": "button", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[2]"}, {"position_id": 1887, "txt": "onClick", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[4]"}, {"position_id": 1889, "txt": "=", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[5]"}, {"position_id": 1891, "txt": "{() ", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[6]"}, {"position_id": 1893, "txt": "=>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[7]"}, {"position_id": 1895, "txt": "remove", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[9]"}, {"position_id": 1897, "txt": "()}>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[12]/span[10]"}, {"position_id": 1899, "txt": "    Remove", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[13]/span"}, {"position_id": 1901, "txt": "  </", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[14]/span[1]"}, {"position_id": 1903, "txt": "button", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[14]/span[2]"}, {"position_id": 1905, "txt": ">", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[14]/span[3]"}, {"position_id": 1907, "txt": "</>", "x": "/html/body/div/div/div[2]/article/main/div[17]/pre/code/span[15]/span"}]}, "tags": [], "label": "code", "web_segment_id": 65, "global_sentence_id": 88, "edu_l1_label": "EDU_O"}, {"txt": "Usage with Firefox", "language": "english", "position": {"atoms": [{"position_id": 1909, "txt": "Usage with Firefox", "x": "/html/body/div/div/div[2]/article/main/h3[9]"}]}, "tags": ["h3"], "label": "content", "web_segment_id": 66, "global_sentence_id": 89, "edu_l1_label": "IOS"}, {"txt": "To use the storage API on Firefox during development you need to add an Add-on ID to your manifest, otherwise, you will get this error:", "language": "english", "position": {"atoms": [{"position_id": 1911, "txt": "To use the storage API on Firefox during development you need to add an Add-on ID to your manifest, otherwise, you will get this error:", "x": "/html/body/div/div/div[2]/article/main/p[22]"}]}, "tags": [], "label": "content", "web_segment_id": 67, "global_sentence_id": 90, "edu_l1_label": "IOS"}, {"txt": "Error:", "language": "english", "position": {"atoms": [{"position_id": 1913, "txt": "Error:", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p"}]}, "tags": [], "label": "content", "web_segment_id": 68, "global_sentence_id": 91, "edu_l1_label": "IOS"}, {"txt": " The storage API will not work with a temporary addon ID.", "language": "english", "position": {"atoms": [{"position_id": 1914, "txt": " The storage API will not work with a temporary addon ID.", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p"}]}, "tags": [], "label": "content", "web_segment_id": 68, "global_sentence_id": 92, "edu_l1_label": "IOS"}, {"txt": " Please add an explicit addon ID to your manifest.", "language": "english", "position": {"atoms": [{"position_id": 1915, "txt": " Please add an explicit addon ID to your manifest.", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p"}]}, "tags": [], "label": "content", "web_segment_id": 68, "global_sentence_id": 93, "edu_l1_label": "IOS"}, {"txt": " For more information see https://mzl.la/3lPk1aE (opens in a new tab).", "language": "english", "position": {"atoms": [{"position_id": 1916, "txt": " For more information see ", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p"}, {"position_id": 1918, "txt": "https://mzl.la/3lPk1aE", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p/a"}, {"position_id": 1920, "txt": " (opens in a new tab)", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p/a/span"}, {"position_id": 1922, "txt": ".", "x": "/html/body/div/div/div[2]/article/main/blockquote[2]/p/a"}]}, "tags": [], "label": "content", "web_segment_id": 68, "global_sentence_id": 94, "edu_l1_label": "IOS"}, {"txt": "To add an Add-on ID to your manifest, add this to your package.json:", "language": "english", "position": {"atoms": [{"position_id": 1924, "txt": "To add an Add-on ID to your manifest, add this to your ", "x": "/html/body/div/div/div[2]/article/main/p[23]"}, {"position_id": 1926, "txt": "package.json", "x": "/html/body/div/div/div[2]/article/main/p[23]/code"}, {"position_id": 1928, "txt": ":", "x": "/html/body/div/div/div[2]/article/main/p[23]/code"}]}, "tags": [], "label": "content", "web_segment_id": 69, "global_sentence_id": 95, "edu_l1_label": "IOS"}, {"txt": "\"manifest\":", "language": "english", "position": {"atoms": [{"position_id": 1930, "txt": "\"manifest\":", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[1]/span"}]}, "tags": [], "label": "code", "web_segment_id": 70, "global_sentence_id": 96, "edu_l1_label": "EDU_O"}, {"txt": " {  \"browser_specific_settings\":", "language": "english", "position": {"atoms": [{"position_id": 1931, "txt": " {", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[1]/span"}, {"position_id": 1933, "txt": "  \"browser_specific_settings\":", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[2]/span"}]}, "tags": [], "label": "code", "web_segment_id": 70, "global_sentence_id": 97, "edu_l1_label": "EDU_O"}, {"txt": " {    \"gecko\":", "language": "english", "position": {"atoms": [{"position_id": 1934, "txt": " {", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[2]/span"}, {"position_id": 1936, "txt": "    \"gecko\":", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[3]/span"}]}, "tags": [], "label": "code", "web_segment_id": 70, "global_sentence_id": 98, "edu_l1_label": "EDU_O"}, {"txt": " {      \"id\": \"", "language": "english", "position": {"atoms": [{"position_id": 1937, "txt": " {", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[3]/span"}, {"position_id": 1939, "txt": "      \"id\": \"", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[4]/span"}]}, "tags": [], "label": "code", "web_segment_id": 70, "global_sentence_id": 99, "edu_l1_label": "EDU_O"}, {"txt": "your-id@example.com\"    }  }}", "language": "english", "position": {"atoms": [{"position_id": 1940, "txt": "your-id@example.com\"", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[4]/span"}, {"position_id": 1942, "txt": "    }", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[5]/span"}, {"position_id": 1944, "txt": "  }", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[6]/span"}, {"position_id": 1946, "txt": "}", "x": "/html/body/div/div/div[2]/article/main/div[18]/pre/code/span[7]/span"}]}, "tags": [], "label": "code", "web_segment_id": 70, "global_sentence_id": 100, "edu_l1_label": "EDU_O"}, {"txt": "The format of Add-on IDs differ between manifest versions.", "language": "english", "position": {"atoms": [{"position_id": 1948, "txt": "The format of Add-on IDs differ between manifest versions.", "x": "/html/body/div/div/div[2]/article/main/p[24]"}]}, "tags": [], "label": "content", "web_segment_id": 71, "global_sentence_id": 101, "edu_l1_label": "IOS"}, {"txt": "Manifest V2:", "language": "english", "position": {"atoms": [{"position_id": 1950, "txt": "Manifest V2:", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[1]"}]}, "tags": ["li"], "label": "content", "web_segment_id": 72, "global_sentence_id": 102, "edu_l1_label": "IOS"}, {"txt": " your-id@example.com", "language": "english", "position": {"atoms": [{"position_id": 1951, "txt": " ", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[1]"}, {"position_id": 1953, "txt": "your-id@example.com", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[1]/code"}]}, "tags": ["li"], "label": "content", "web_segment_id": 72, "global_sentence_id": 103, "edu_l1_label": "IOS"}, {"txt": "Manifest V3:", "language": "english", "position": {"atoms": [{"position_id": 1955, "txt": "Manifest V3:", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[2]"}]}, "tags": ["li"], "label": "content", "web_segment_id": 73, "global_sentence_id": 104, "edu_l1_label": "IOS"}, {"txt": " {ed7ba470-8e54-465e-825c-99712043e01c} (any UUID)", "language": "english", "position": {"atoms": [{"position_id": 1956, "txt": " ", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[2]"}, {"position_id": 1958, "txt": "{ed7ba470-8e54-465e-825c-99712043e01c}", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[2]/code"}, {"position_id": 1960, "txt": " (any UUID)", "x": "/html/body/div/div/div[2]/article/main/ul[2]/li[2]/code"}]}, "tags": ["li"], "label": "content", "web_segment_id": 73, "global_sentence_id": 105, "edu_l1_label": "IOS"}, {"txt": "Once your extension is published, the Add-on ID defined in the package.json file should be displayed in your extension's Developer Page under \"Technical Details > UUID\".", "language": "english", "position": {"atoms": [{"position_id": 1962, "txt": "Once your extension is published, the Add-on ID defined in the ", "x": "/html/body/div/div/div[2]/article/main/p[25]"}, {"position_id": 1964, "txt": "package.json", "x": "/html/body/div/div/div[2]/article/main/p[25]/code"}, {"position_id": 1966, "txt": " file ", "x": "/html/body/div/div/div[2]/article/main/p[25]/code"}, {"position_id": 1968, "txt": "should", "x": "/html/body/div/div/div[2]/article/main/p[25]/em[1]"}, {"position_id": 1970, "txt": " be displayed in your extension's Developer Page under ", "x": "/html/body/div/div/div[2]/article/main/p[25]/em[1]"}, {"position_id": 1972, "txt": "\"Technical Details > UUID\"", "x": "/html/body/div/div/div[2]/article/main/p[25]/em[2]"}, {"position_id": 1974, "txt": ".", "x": "/html/body/div/div/div[2]/article/main/p[25]/em[2]"}]}, "tags": ["em"], "label": "content", "web_segment_id": 74, "global_sentence_id": 106, "edu_l1_label": "IOS"}, {"txt": "Note:", "language": "english", "position": {"atoms": [{"position_id": 1976, "txt": "Note:", "x": "/html/body/div/div/div[2]/article/main/p[26]/strong"}]}, "tags": ["strong"], "label": "content", "web_segment_id": 75, "global_sentence_id": 107, "edu_l1_label": "IOS"}, {"txt": " The Add-on ID used during development (i.e. the one defined in the manifest) will likely be the one Mozilla assigns to your when publishing.", "language": "english", "position": {"atoms": [{"position_id": 1978, "txt": " The Add-on ID used during development (i.e. the one defined in the manifest) will likely be the one Mozilla assigns to your when publishing.", "x": "/html/body/div/div/div[2]/article/main/p[26]/strong"}]}, "tags": ["strong"], "label": "content", "web_segment_id": 75, "global_sentence_id": 108, "edu_l1_label": "IOS"}, {"txt": " If it's not and one is generated for you, you will have to update the package.json file with the new ID.", "language": "english", "position": {"atoms": [{"position_id": 1979, "txt": " If it's not and one is generated for you, you will have to update the ", "x": "/html/body/div/div/div[2]/article/main/p[26]/strong"}, {"position_id": 1981, "txt": "package.json", "x": "/html/body/div/div/div[2]/article/main/p[26]/code"}, {"position_id": 1983, "txt": " file with the new ID.", "x": "/html/body/div/div/div[2]/article/main/p[26]/code"}]}, "tags": ["strong"], "label": "content", "web_segment_id": 75, "global_sentence_id": 109, "edu_l1_label": "IOS"}, {"txt": "Add-on IDs are unique and the same one cannot be used for multiple extensions (both manifest versions).", "language": "english", "position": {"atoms": [{"position_id": 1985, "txt": "Add-on IDs are unique and the same one cannot be used for multiple extensions (both manifest versions).", "x": "/html/body/div/div/div[2]/article/main/p[27]"}]}, "tags": [], "label": "content", "web_segment_id": 76, "global_sentence_id": 110, "edu_l1_label": "IOS"}, {"txt": "Last updated on October 8, 2024", "language": "english", "position": {"atoms": [{"position_id": 1987, "txt": "Last updated on ", "x": "/html/body/div/div/div[2]/article/main/div[19]"}, {"position_id": 1989, "txt": "October 8, 2024", "x": "/html/body/div/div/div[2]/article/main/div[19]/time"}]}, "tags": [], "label": "publish_time", "web_segment_id": 77, "global_sentence_id": 111, "edu_l1_label": "EDU_O"}], "type": "WEB"}
# Storage API – Plasmo
## Installation
## Usage Examples
## Storage
### Customizing the storage area
### Automatically copy data to localStorage
### Watch (for state sync)
## Secure Storage
## React Hook API
### Watch and render a value
### With a custom storage instance
### Rendering initial value WITHOUT persisting
### Rendering AND persisting initial value
### Advanced usage
### Usage with Firefox