用localStorage来存储数据的一些经验

本文详细解析了localStorage和sessionStorage的使用方法,包括存储、获取和清除数据的方式。阐述了两者之间的区别,如localStorage的持久存储特性与sessionStorage的会话存储特性。同时,文章还介绍了如何使用JSON.stringify()和JSON.parse()来存储和读取复杂数据类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

localStorage:

是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存

sessionStorage:

用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。

 

localStorage与sessionStorage具有相同的API,以下方法都可以用于sessionStorage

 

localStorage存储方法

localStorage.name ='vanida;

localStorage["name"]='vanida';

localStorage.setItem("name","vanida");

   

//这三种设置值方式是一样的;

 


localStorage获取值方法


var name = localStorage["name"]

var name= localStorage.name

var name= localStorage.getItem("name");

//这三种获取值方式是一样的;

 


localStorage清除特定值方法

//清除name的值
localStorage.removeItem("name");

localStorage.name='';

 

localStorage清除所有值方法

 localStorage.clear()

 

localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();

 

var person = {name:"vanida","sex":"girl","age":25};

localStorage.setItem("person",JSON.stringify(person));

// localStorage.person="{"name":"vanida","sex":"girl","age":25}"

注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy!

 

 

然后取出person的对象你可以用JSON.parse();

 

person = JSON.parse(localStorage.getItem("person"));

// {name: "vanida", sex: "girl", age: 25}

 

 

转自:https://www.cnblogs.com/xiaojingyuan/p/5757975.html

转载于:https://www.cnblogs.com/chenguangliang/p/10967148.html

<think>我们正在解决一个具体问题:使用localStorage存储数据时,页面首次刷新数据未渲染。 根据用户描述,问题发生在首次刷新时,数据已经存储localStorage中,但页面没有渲染出来。 分析原因:通常,这是因为在页面渲染时(比如React/Vue等框架的组件渲染期间),我们还没有从localStorage中读取数据,或者读取数据的时机太晚(比如在异步操作中),导致初始渲染时没有数据。 解决方案:我们需要确保在页面渲染之前,从localStorage中获取数据并设置到组件的状态中。在React中,我们通常在组件的初始化阶段(如constructor或useState)或者使用useEffect(但要注意依赖和时机)来同步获取数据并设置状态。在Vue中,我们可以在created或mounted钩子中同步获取数据并设置到data中。 但是,用户提到“页面首次刷新数据未渲染”,这里特别要注意:在服务端渲染(SSR)或静态站点生成(SSG)的场景下,localStorage是浏览器端的,在服务端无法访问,所以不能在服务端渲染阶段使用。但用户没有提到服务端渲染,我们假设是客户端渲染。 根据引用[3]中提到的思路,我们可以将localStorage数据作为初始状态,在页面加载时(即组件挂载前)就读取并设置到状态中。 下面以React和Vue为例分别说明: 1. React示例: 在函数组件中,我们可以在useEffect中设置状态,但是这样会导致先渲染空状态,再渲染有数据的状态(即会有一次闪烁)。为了避免闪烁,我们可以使用useState的初始化函数来同步读取localStorage,这样初始状态就是localStorage的值。 例如: ```javascript function MyComponent() { // 在useState的初始化函数中读取localStorage,注意:这个函数只会在组件初始化时执行一次 const [user, setUser] = useState(() => { const savedUser = localStorage.getItem('user'); if (savedUser) { return JSON.parse(savedUser); } return null; }); // ... 其他代码 } ``` 这样,在组件首次渲染时,user状态就已经是localStorage存储的值了。 2. Vue示例: 在Vue中,我们可以在data选项中通过函数返回初始数据,并在其中读取localStorage。 例如: ```javascript export default { data() { return { user: JSON.parse(localStorage.getItem('user') || null) } }, // ... 其他代码 } ``` 但是,如果用户的数据在页面加载后发生了变化(比如其他标签页修改了localStorage),需要实时更新,那就要监听storage事件。不过用户的问题只是首次刷新,所以暂时不需要考虑。 另外,用户提到“页面首次刷新数据未渲染”,还有一种可能是:在页面刷新时,localStorage数据还没有被写入?但根据用户描述,是修改个人信息后重新执行了localStorage.setItem,然后刷新页面,所以数据应该是存在的。 如果上述方法还不能解决,可能是代码执行顺序的问题。比如,在React中,如果我们在渲染过程中(比如在函数组件体内)直接使用localStorage,而不是通过状态管理,那么当状态更新时,组件重新渲染,但可能没有读取最新的localStorage。所以一定要通过状态来驱动视图。 另外,注意localStorage的读取是同步的,所以不会存在异步延迟问题。 总结步骤: 1. 确定在组件的初始化状态时(React的useState初始化函数,Vue的data函数)读取localStorage并作为初始状态。 2. 确保在数据更新时(修改个人信息后)不仅更新localStorage,还要更新组件的状态(通过setState或Vue的this.user=xxx),这样视图会自动更新。 如果用户是在修改个人信息后刷新页面,那么刷新后,组件会重新初始化,此时就会从localStorage中读取最新的数据。 注意:如果用户使用的是Vuex,那么需要按照引用[3]的方法,在Vuex初始化的时候从localStorage中读取数据,然后作为Vuex的初始状态。同样,在每次Vuex状态改变时,将状态保存到localStorage(可以使用插件如vuex-persistedstate)。 但是用户的问题描述中并没有提到Vuex,所以我们按照普通组件状态处理。 如果用户的问题仍然存在,请检查: - 确保localStorage中确实存在键为'user'的数据(可以通过开发者工具查看)。 - 确保读取的键名正确,没有拼写错误。 - 确保在设置localStorage时,数据已经正确存储(比如使用JSON.stringify存储对象)。 - 确保在读取时使用了JSON.parse来解析字符串。 最后,如果用户使用了服务端渲染(如Next.js或Nuxt.js),那么需要特别注意:在服务端渲染时不能访问localStorage,因为它是浏览器对象。此时,我们可以在客户端挂载后再读取localStorage并设置状态。在React中,可以在useEffect中设置状态(这样会导致两次渲染,第一次没有数据,第二次有数据,所以可能需要处理加载状态)。在Vue中,可以在mounted钩子中设置。 但是,用户问题描述为“首次刷新”,如果是服务端渲染,那么服务端返回的HTML中确实不会有localStorage数据,需要客户端注水(hydration)后再渲染出来。所以,如果用户的项目是服务端渲染,那么需要做兼容处理。 鉴于用户没有明确说明,我们先按照客户端渲染的解决方案。 因此,核心解决方案是:在组件的初始化状态时同步读取localStorage。 下面我们生成相关问题:</think>### localStorage 存储数据时页面首次刷新数据未渲染的解决方法 当使用 `localStorage` 存储数据后,页面首次刷新时数据未渲染,通常是因为 **数据加载时机早于 localStorage 读取操作**。以下是具体解决方案: #### 1. 确保在组件初始化时同步读取数据(推荐) 在组件挂载前(React 的构造函数/Vue 的 `created` 钩子)同步读取 `localStorage`,避免异步延迟: ```javascript // React 示例 class MyComponent extends React.Component { constructor(props) { super(props); // 同步读取 localStorage this.state = { userData: JSON.parse(localStorage.getItem('user')) || null }; } // ... } // Vue 示例 export default { data() { return { // 同步读取 localStorage userData: JSON.parse(localStorage.getItem('user')) || null } } } ``` #### 2. 使用状态管理库持久化(Vuex/Redux) 通过插件将状态自动同步到 `localStorage`,解决初始化顺序问题: ```javascript // Vuex + vuex-persistedstate 示例 import createPersistedState from 'vuex-persistedstate'; const store = new Vuex.Store({ plugins: [createPersistedState({ key: 'user', paths: ['userData'] // 指定需要持久化的状态 })], state: { userData: null } }); // 使用:正常提交 mutation 更新状态,插件会自动同步到 localStorage ``` #### 3. 服务端渲染(SSR)兼容方案 在 `componentDidMount`(React) 或 `mounted`(Vue) 中处理客户端渲染: ```javascript // React SSR 兼容 componentDidMount() { if (typeof window !== 'undefined') { const userData = JSON.parse(localStorage.getItem('user')); this.setState({ userData }); } } // Vue SSR 兼容 mounted() { if (process.client) { // Nuxt.js 环境 this.userData = JSON.parse(localStorage.getItem('user')); } } ``` #### 4. 添加加载状态提升用户体验 ```javascript // React 示例 render() { if (!this.state.userData) { return <div>加载中...</div>; // 数据未加载时的占位 } return <div>{this.state.userData.name}</div>; } ``` #### 关键注意事项 1. **读取时机**:确保在渲染前完成 `localStorage` 读取(同步操作) 2. **错误处理**:始终处理 `JSON.parse` 异常: ```javascript try { const data = JSON.parse(localStorage.getItem('user')); } catch (e) { console.error('数据解析失败', e); } ``` 3. **数据类型**:`localStorage` 只能存储字符串,对象需用 `JSON.stringify()` 转换[^2] 4. **存储限制**:单个域名存储上限通常为 5MB,超出会导致错误[^3] > 示例数据流: > 用户操作 → 更新状态 → `localStorage.setItem()` → 页面刷新 → **同步读取** → 渲染数据 通过以上方法,可确保页面首次加载时正确渲染 `localStorage` 存储数据。实际应用中,推荐使用方案1(同步初始化)或方案2(状态管理持久化)作为核心解决方案。 --- ### 相关问题 1. **如何监听 localStorage 变化实现多标签页数据同步?** (提示:使用 `window.addEventListener('storage', callback)`) 2. **localStorage 和 sessionStorage 有哪些关键区别?** (提示:生命周期、作用域、存储限制等维度) 3. **Vue/React 项目中如何优雅地封装 localStorage 操作?** (提示:创建统一存储模块,包含 get/set/remove 方法并处理序列化) 4. **当 localStorage 被禁用时,前端有哪些备选存储方案?** (提示:IndexedDB、Cookies、Service Worker 缓存等) 5. **如何解决 localStorage 存储数据时的性能问题?** (提示:分块存储、压缩数据、异步读写等优化策略) [^1]: 通过 localStorage 实现数据和页面更新 [^2]: localStorage 存储数据的基础操作 [^3]: 使用持久化存储解决状态丢失问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值