LocalStorage是一种使用JavaScript存储持久数据的方法（另请参见：SessionStorage）。
LocalStorage 无法与 React Context 一起使用
我尝试使用 useEffect 将用户详细信息存储在本地存储中，但无法。请对此提供任何帮助。 代码 ： 常量 AuthContext = createContext() const AuthProvider = ({ 孩子 }) => {
在网上找到了这段代码： const keys=Object.keys(localStorage).filter(key=>key.includes('doinclude')); const todos=keys.map(key=>JSON.parse(localStorage.getItem(key))); 由此产生的“todo...
Next.js 客户端页面保护/使用 useContext() 与 localStorage.getItem() 进行身份验证
有多个资源提供了如何使用 useContext() 和 _app.js 文件中的包装器“保护”页面的示例。 其中包括将身份验证信息存储在 co...
尽管对存储访问 API 的支持有限，但仍将 LocalStorage 数据传输到新域
我在 Github Pages 上托管了一个没有自定义域的网站（例如 auroratide.github.io/my-website），现在我想将其移动到自定义域（例如 my-website.com）。网站保存数据...
我想解决这个问题。我是 React js 的新手。但我需要在前端存储一些敏感数据。就像数据库名称、数据库密码和数据库用户名一样。我用过通用cookie...
Angular 17：保存更改后未定义 localStorage 错误且浏览器陷入重新加载状态
当我在 Angular 17 中运行项目时，它运行成功。但是，当我对代码进行一些更改并保存更改时： 浏览器页面卡在重新加载状态 还出现了这个错误： 错误d...
错误“超出最大更新深度。当组件在 useEffect 中调用 setState 时可能会发生这种情况”
每当调用我的购物车组件（也如下所示）时，我都会遇到此错误（重复数千次，直到页面崩溃）： index.js:1 警告：超出最大更新深度。这可能发生在...
为什么 localStorage 没有在 Chrome 中持久保存？
我正在尝试通过以下代码学习如何使用 localStorage js 对象。 函数 saveStuff() { </desc> <question vote="20"> <p>我正在尝试通过以下代码学习如何使用 localStorage js 对象。</p> <pre><code><!DOCTYPE html> <html> <head> <script type="text/javascript"> function saveStuff() { sessionStorage.setItem('sessionKey', 'sessionValue'); localStorage.setItem('localKey', 'localValue'); } </script> </head> <body> <button type="button" onclick="saveStuff()">Save</button> </body> </html> </code></pre> <p>我知道这并不总是适用于 file:/// 所以我使用 mongoose 来提供它。当我单击“保存”按钮时，Chrome 的 JavaScript 控制台中的结果对我来说看起来是正确的。但是，当我按刷新时，本地存储和会话存储都会被清除，而我期望本地存储值会持续存在。 <pre><code>http://127.0.0.1/</code></pre> 和 <pre><code>http://localhost/</code></pre> 都会发生这种情况。</p> <p>有谁知道为什么会发生这种情况？在“设置”的“内容设置”中，我选择了“允许设置本地数据（推荐）”并取消勾选“阻止第三方 cookie 和站点数据”。我的代码中是否缺少某些内容？</p> <p>（Chrome 版本 23.0.1271.64 m）</p> </question> <answer tick="true" vote="13"> <p>好的。谢谢，必须去 pimvdb 解决这个问题，但这是解决方案。</p> <pre><code><!DOCTYPE html> <html> <head> <script type="text/javascript"> function saveStuff() { sessionStorage.setItem('sessionKey', 'sessionValue'); localStorage.setItem('localKey', 'localValue'); } localStorage.getItem('localKey'); sessionStorage.getItem('sessionKey'); </script> </head> <body> <button type="button" onclick="saveStuff()">Save</button> </body> </html> </code></pre> <p>总结似乎是您必须尝试读取密钥才能保留它。</p> <p>结论：WTF。</p> </answer> <answer tick="false" vote="13"> <p><pre><code><!-- Necro post I know, but maybe it helps someone else --></code></pre></p> <p>我不明白为什么我在开发工具中的 <pre><code>localStorage</code></pre> 中看不到某些内容，但在输入 <pre><code>localStorage</code></pre> 时可以在控制台中看到它。好吧，如果您在开发工具打开的情况下存储某些内容，您将不会看到 <pre><code>Application -> Local Storage</code></pre> 为您的主机列出了任何内容。当我关闭/重新打开开发工具时，我可以看到我的数据。 </p> <p>因此，总之，关闭/重新打开开发工具。 </p> </answer> <answer tick="false" vote="0"> <p>我解决了这个问题，我忘记了帐户密码</p> </answer> </body></html>
如何在plawright-test中的浏览器控制台中执行此命令？
我需要在 Playwright 测试中执行此命令，以切换页面测试模式： eval(localStorage.getItem(toggleTestMode)) 我尝试了以下操作： 常量切换测试模式 = '切换测试模式'; 页面.评估...
从 localStorage 获取数据时无法更新状态[已关闭]
const [currentUser, setCurrentUser] = useState(未定义) 使用效果（（）=> { 异步函数 fetchdata() { const storeUser = localStorage.getItem("聊天应用程序用户"); ...
const [当前用户，setCurrentUser] = useState(未定义) 使用效果（（）=> { 异步函数 fetchdata() { const storeUser = localStorage.getItem("聊天应用程序用户"); ...
Safari 设置 iframe 内的 localStorage 未正确共享
我有 example.com，它托管一个 iframe 到 app.example.com/signup。每当 app.example.com/signup 加载时，我想从 iframe 中为 app.example.com 设置一个 localStorage 项： ----------...
我需要将密码存储在 HTML5 LocalStorage 中（不，我不能使用哈希值，也不能要求用户输入密码）。 最安全的方法是什么？我明白这永远不可能
Vue useStorage (usevue) 始终以干净的方式启动，而不是在 Pinia 存储中导入状态
我在 vitesse-nuxt3 之上构建了我的应用程序，除了尝试通过 vueuse 使用 LocalStorage 之外，一切都很顺利。 成分： const { 测试 } = useTestStore() &...</desc> <question vote="0"> <p>我在<pre><code>vitesse-nuxt3</code></pre>之上构建了我的应用程序，除了尝试通过<pre><code>vueuse</code></pre>使用LocalStorage之外，一切都很顺利。</p> <p><strong>组件：</strong></p> <pre><code><script setup lang="ts"> const { test } = useTestStore() </script> <template> <div> <pre>{{ test }}</pre> <hr> <input :id="slug" v-model="value" type="text" > </div> </template> </code></pre> <p><strong>Pinia 商店：</strong></p> <pre><code>import { acceptHMRUpdate, defineStore } from 'pinia' import { useStorage } from '@vueuse/core' export const useTestStore = defineStore('test', () => { const test = ref( useStorage('test', { initials: 'It is initials', }), ) return ({ test, }) }) if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(useTestStore, import.meta.hot)) </code></pre> <p>我看着它设置数据（在 Chrome 的开发工具中），但它总是重新加载默认数据，而不是在刷新之间保留。</p> <p>谢谢你。</p> </question> <answer tick="true" vote="2"> <p>您的 <a href="https://stackblitz.com/edit/github-mgbef6-gfkpou" rel="nofollow noreferrer">demo</a> 中的问题是该组件是在服务器端渲染的，服务器端没有本地存储，因此 <a href="https://github.com/vueuse/vueuse/blob/73cc5c2/packages/core/useStorage/index.ts#L142-L143" rel="nofollow noreferrer"><pre><code>useStorage()</code></pre> 默认为给定的初始值</a>。</p> <p>一种解决方法是仅在客户端上渲染组件，使用 <a href="https://v3.nuxtjs.org/guide/directory-structure/components#clientonly-component" rel="nofollow noreferrer"><pre><code><client-only></code></pre> 组件</a>:</p> <pre><code><client-only> <component-that-uses-local-storage /> </client-only> </code></pre> <p><a href="https://stackblitz.com/edit/vueuse-usestorage-nuxt3?file=pages%2Findex.vue" rel="nofollow noreferrer">演示</a></p> <p>或者，如果您在 pinia 商店中使用 <pre><code>useStorage()</code></pre>，您可以跳过水合以避免服务器端生成的状态进入客户端，请参阅<a href="https://pinia.vuejs.org/cookbook/composables.html#ssr" rel="nofollow noreferrer">此处</a>。</p> <pre><code>export const useTestStore = defineStore('test', () => { const test = useStorage('test', { initials: 'It is initials', }) return { test: skipHydrate(test), ) }) </code></pre> </answer> <answer tick="false" vote="-1"> <p>对于像@tony19所说的这样的商店</p> <pre><code>export const useAuthStore = defineStore({ id: 'auth.store', state: () => { token: { accessToken: useStorage('accessToken', [XXXX], undefined, { serializer: StorageSerializers.object }), refreshToken: useStorage('refreshToken', [YYYY], undefined, { serializer: StorageSerializers.object }) }, }, }) </code></pre> <p><pre><code>[XXXX]</code></pre> <pre><code>[YYYY]</code></pre> 为默认值</p> <p>ssr之后<pre><code>pinia.state.value</code></pre>变成</p> <pre><code>window.__INITIAL_SSR_CONTEXT__ = { state: { "auth.store": { "token":{ "accessToken":[XXXX], "refreshToken":[YYYY] } } } } </code></pre> <p>在客户端重新设计 json 对象以像这样存储</p> <pre><code>const ssr_state = (window as any)['__INITIAL_SSR_CONTEXT__']?.['state'] if (ssr_state) { pinia.state.value = ssr_state } </code></pre> <p>因此 <pre><code>accessToken</code></pre>、<pre><code>refreshToken</code></pre> 属性更改为客户端的计划对象，您可以更改它，但存储不会更新。</p> <p>我的解决方案：</p> <p>添加一个动作来存储</p> <pre><code>actions:{ // ... // call this once when isSSR is true on client side entry reasignToken() { this.token = { accessToken: useStorage('accessToken', this.token.accessToken, undefined, { serializer: StorageSerializers.object }), refreshToken: useStorage('refreshToken', this.token.refreshToken, undefined, { serializer: StorageSerializers.object }) } }, // regular call on server side and client side setToken(token) { //... } } </code></pre> </answer> </body></html>
我正在尝试保存 Bootstrap Collapses 的展开/折叠状态。 我将其保存在 LocalStorage 中并从中读取。 $(".content-accordion-content").each(function (index) {...
如何在 Laravel 身份验证中间件重定向之前将链接存储在 localStorage 中？
我正在开发一个 Laravel 应用程序，我需要处理邀请链接。这是要求： 邀请链接如下所示：https://example.com/{task_id}/{random_task_link}。 当你...
我正在使用 React 构建一个编程教程网站。每个内容页面都有一个侧边栏和一个主要内容部分，其中包含用于导航主题的“上一个”和“下一个”按钮。然而，
这是一个小型 React 应用程序，它使用 State 并将更新的数据保存到 localStorage。 您可以通过输入名称并按添加按钮来创建按钮。 按钮列表 现在有两点...
try-catch 是为了防止或处理错误吗？ （在 JavaScript 中）
最近我和同事讨论了如何使用 try 和 catch 来通知错误或避免错误。 这是我同事的方法： 从“配置”导入配置； 导出 const getUserFromLocalSt...
使用 JSON.stringify 保存到本地存储时，我的值变为空
我正在开发一个网络应用程序，用户单击表格中的一行，它会变成绿色，然后将其保存到本地存储中，以便每次访问网页时都会保存他们拥有的行