local-storage 相关问题

LocalStorage是一种使用JavaScript存储持久数据的方法(另请参见:SessionStorage)。

从本地存储获取当前用户时无法设置它

const [当前用户,setCurrentUser] = useState(未定义) 使用效果(()=> { 异步函数 fetchdata() { const storeUser = localStorage.getItem("聊天应用程序用户"); ...

回答 1 投票 0

Safari 设置 iframe 内的 localStorage 未正确共享

我有 example.com,它托管一个 iframe 到 app.example.com/signup。每当 app.example.com/signup 加载时,我想从 iframe 中为 app.example.com 设置一个 localStorage 项: ----------...

回答 2 投票 0

在 HTML5 LocalStorage 中存储密码

我需要将密码存储在 HTML5 LocalStorage 中(不,我不能使用哈希值,也不能要求用户输入密码)。 最安全的方法是什么?我明白这永远不可能

回答 2 投票 0

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>&lt;script setup lang=&#34;ts&#34;&gt; const { test } = useTestStore() &lt;/script&gt; &lt;template&gt; &lt;div&gt; &lt;pre&gt;{{ test }}&lt;/pre&gt; &lt;hr&gt; &lt;input :id=&#34;slug&#34; v-model=&#34;value&#34; type=&#34;text&#34; &gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p><strong>Pinia 商店:</strong></p> <pre><code>import { acceptHMRUpdate, defineStore } from &#39;pinia&#39; import { useStorage } from &#39;@vueuse/core&#39; export const useTestStore = defineStore(&#39;test&#39;, () =&gt; { const test = ref( useStorage(&#39;test&#39;, { initials: &#39;It is initials&#39;, }), ) 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>&lt;client-only&gt;</code></pre> 组件</a>:</p> <pre><code>&lt;client-only&gt; &lt;component-that-uses-local-storage /&gt; &lt;/client-only&gt; </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(&#39;test&#39;, () =&gt; { const test = useStorage(&#39;test&#39;, { initials: &#39;It is initials&#39;, }) return { test: skipHydrate(test), ) }) </code></pre> </answer> <answer tick="false" vote="-1"> <p>对于像@tony19所说的这样的商店</p> <pre><code>export const useAuthStore = defineStore({ id: &#39;auth.store&#39;, state: () =&gt; { token: { accessToken: useStorage(&#39;accessToken&#39;, [XXXX], undefined, { serializer: StorageSerializers.object }), refreshToken: useStorage(&#39;refreshToken&#39;, [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: { &#34;auth.store&#34;: { &#34;token&#34;:{ &#34;accessToken&#34;:[XXXX], &#34;refreshToken&#34;:[YYYY] } } } } </code></pre> <p>在客户端重新设计 json 对象以像这样存储</p> <pre><code>const ssr_state = (window as any)[&#39;__INITIAL_SSR_CONTEXT__&#39;]?.[&#39;state&#39;] 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(&#39;accessToken&#39;, this.token.accessToken, undefined, { serializer: StorageSerializers.object }), refreshToken: useStorage(&#39;refreshToken&#39;, this.token.refreshToken, undefined, { serializer: StorageSerializers.object }) } }, // regular call on server side and client side setToken(token) { //... } } </code></pre> </answer> </body></html>

回答 0 投票 0

JavaScript 字符串拼接似乎不起作用

我正在尝试保存 Bootstrap Collapses 的展开/折叠状态。 我将其保存在 LocalStorage 中并从中读取。 $(".content-accordion-content").each(function (index) {...

回答 2 投票 0

如何在 Laravel 身份验证中间件重定向之前将链接存储在 localStorage 中?

我正在开发一个 Laravel 应用程序,我需要处理邀请链接。这是要求: 邀请链接如下所示:https://example.com/{task_id}/{random_task_link}。 当你...

回答 1 投票 0

React 中页面刷新时保留当前主题的问题

我正在使用 React 构建一个编程教程网站。每个内容页面都有一个侧边栏和一个主要内容部分,其中包含用于导航主题的“上一个”和“下一个”按钮。然而,

回答 1 投票 0

在 ReactJS 应用程序中存储状态数据的正确点是什么?

这是一个小型 React 应用程序,它使用 State 并将更新的数据保存到 localStorage。 您可以通过输入名称并按添加按钮来创建按钮。 按钮列表 现在有两点...

回答 1 投票 0

try-catch 是为了防止或处理错误吗? (在 JavaScript 中)

最近我和同事讨论了如何使用 try 和 catch 来通知错误或避免错误。 这是我同事的方法: 从“配置”导入配置; 导出 const getUserFromLocalSt...

回答 3 投票 0

使用 JSON.stringify 保存到本地存储时,我的值变为空

我正在开发一个网络应用程序,用户单击表格中的一行,它会变成绿色,然后将其保存到本地存储中,以便每次访问网页时都会保存他们拥有的行

回答 1 投票 0

如何在Shopify JS中强制重新加载和清理数据?

我已经尝试了几天来解决这个问题但无法解决。我需要重新加载我的页面并忘记某些函数中先前设置的值。我尝试了很多方法来做到这一点,但没有一个在我...

回答 1 投票 0

在 Blazor 组件中提交表单后如何设置本地存储项?

我正在使用 .NET8 Blazor Web 应用程序模板,其中包含身份信息,并添加了 Blazored.LocalStorage Nuget 包。 我想在用户登录时设置一个本地存储项...

回答 1 投票 0

Ionic 上的登录验证

我尝试使用 ngOnInit 来验证是否在应用程序的 localStorage 上设置了值,但它不起作用。 这就是我现在所拥有的: 这是在应用程序中记录用户的功能 异步登录() { ...

回答 1 投票 0

类型错误:无法读取 null 的属性(读取“图像”)

我正在制作一个电子商务网站,我不知道为什么会出现这种类型的错误。我正在尝试从存储在本地存储中的购物车中检索商品,但商品正在返回...

回答 1 投票 0

从 Chrome 和 Firefox 访问本地文件的 localStorage

我在我的(Windows)计算机上使用多个带有 JavaScript 的 HTML 页面来收集和分析数据。所有文件均在本地提供,无需互联网,例如文件:///C:/work1/data1.html。 我找到了以下...

回答 1 投票 0

cordova 存储本地数据的最佳方式是什么?

我将使用 Angular JS 编写一个 Cordova 应用程序,我想让它适用于 IOS Android 和(如果可能的话)Windows Phone。 我的应用程序不需要互联网或帐户,所以我认为...

回答 3 投票 0

如何向本地存储中的一个键添加多个值

我试图允许用户选择可以存储在本地存储中的多个选择选项。 尝试允许用户选择多个保存并显示在屏幕上的选项。 ...

回答 3 投票 0

如何导入/导出整个本地存储?

我想从本地存储中导出一些项目以将其保存在外部,但采用某种格式,以便稍后可以再次导入。 我的尝试是编写可执行代码,稍后可以将其粘贴到

回答 6 投票 0

List<dynamic>'不是颤动中'Iterable<String>类型的子类型

我正在创建一个演示,用于将喜爱的产品 ID 添加和删除到 obs 列表,然后保存到本地存储... 启动应用程序时,它应该从 stora 获取所有喜爱的产品 ID...

回答 1 投票 0

如何使用本地存储查找我的 JSON 数据?

我正在尝试从本地存储检索用户设置,但是当我尝试访问数据时,我得到一个空值,这会导致 JSON.parse() 出错。我怀疑数据可能没有被存储...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.