H5 localstorage本地缓存数据的封装以及在vue中的使用

本文介绍了一个用于Vue项目的H5 LocalStorage封装方法,通过模块化封装简化了本地存储的操作流程,并展示了如何在实际Vue应用中利用此封装进行数据的增删改查。

H5 localstorage本地缓存数据的封装以及在vue中的使用

vue中常用的 每次增加数据 要缓存
每次删除数据也要缓存

//封装操作localstorage本地存储的方法     模块化的文件


//node.js   基础

var storage = {
	
	set(key,value){
		
		localStorage.setItem(key,JSON.stringify(value));
		
	},
	
	get(key){
		
		return JSON.parse(localStorage.getItem(key));
		
	},
	remove(key){
		localStorage.removeItem(key);
	}
}
//暴露给外部访问
export default storage;

然后某个页面需要本地存储,就需要用 import引入:import storage from ‘./storage.js’

App.vue页面:

<template>

<div id="app"> 

<input type="text" v-model='todo' @keydown="doAdd($event)" />

<hr>
<br>
<h2>进行中</h2>

<ul>

<li v-for="(item,key) in list" v-if="!item.checked"> //添加一个改变的事件
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>

<br> 
<br>
<h2>已完成</h2>
<ul> 
<li v-for="(item,key) in list" v-if="item.checked">    //添加一个改变的事件
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>
</div>
</template>

<script>

import storage from './storage.js';

// console.log(storage);

export default { 
data () { 
  return {

    todo:'' ,
    list: []
  }
},
methods:{
  doAdd(e){
    // console.log(e);
    if(e.keyCode==13){
      this.list.push({
        title:this.todo,
        checked:false
      })
      }

  storage.set('list',this.list);   //添加数据要缓存
  },
  removeData(key){
    this.list.splice(key,1)

    storage.set('list',this.list);  //删除数据要缓存
  },
  saveList(){                //change事件

    storage.set('list',this.list);  //要缓存
  }

},

//获取缓存数据

mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/  mounted 生命周期在载入之后就加载数据

  var list=storage.get('list');

  if(list){ /*注意判断*/ 建议先判断缓存的数据存不存在
    this.list=list;

//或者:this.list=storage.get('list')
  }
}

}
</script>

<style lang="scss">

.finish{

	    li{
	    background:#eee;
	    }
	    }

</style>
<think>好的,用户想了解如何使用Vue3开发影视软件的移动端H5应用。首先,我需要确定用户的需求是什么。可能他们是一个开发者,或者正在计划启动一个项目,想要了解技术选型和实现步骤。 首先,我应该考虑Vue3的优势,比如组合式API、更好的性能、以及更小的体积,这些对移动端开发很有帮助。然后,可能需要介绍开发影视应用的关键功能模块,比如视频列表、播放器、分类筛选、搜索和用户中心。 接下来,技术栈方面,除了Vue3本身,还需要提到常用的UI库,比如Vant,以及状态管理工具Pinia。路由管理用Vue Router,网络请求用Axios。视频播放可能需要第三方库如vue-video-player,或者原生video标签,但要注意兼容性和移动端适配。 开发注意事项方面,移动端适配很重要,比如rem或vw布局,防止滚动穿透,下拉刷新和无限加载优化体验。性能方面,懒加载和虚拟列表可以减少初始加载时间。SEO可能需要SSR,但移动端H5可能更侧重客户端渲染,所以Nuxt.js可能不是必须的,但如果有需要可以提到。 部署方面,简单的静态托管服务如GitHub Pages或Netlify,或者用Nginx做反向代理。最后,可以推荐一些学习资源,比如官方文档和社区,帮助用户进一步学习。 用户可能的深层需求是希望有一个全面的技术方案,包括选型理由和实现要点,也可能关心开发中的常见问题及解决方案。需要确保回答覆盖了这些方面,并且结构清晰,易于理解。使用</think> Vue3 开发影视类移动端 H5 应用是一个高效且灵活的选择,以下是技术方案和关键实现要点的介绍: --- ### **一、技术选型优势** 1. **Vue3 核心优势** - 组合式 API:逻辑复用更灵活(如封装播放器控制、缓存逻辑) - 性能优化:Tree-shaking 减少打包体积,Proxy 响应式性能提升 - TypeScript 支持:适合中大型项目开发 - 更好的移动端兼容性 2. **配套生态** - UI 库:Vant4(轻量级移动组件库) - 状态管理:Pinia(替代 Vuex 的轻量方案) - 路由:Vue Router 4(支持动态路由,适配影视分类结构) - 请求库:Axios + 拦截器(处理鉴权、Loading 态) --- ### **二、核心功能模块** 1. **视频播放器** ```vue <!-- 使用 @videojs/http-streaming 支持 HLS/DASH --> <video ref="videoPlayer" class="video-js" /> <script setup> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; onMounted(() => { this.player = videojs(this.$refs.videoPlayer, { autoplay: false, controls: true, sources: [{ src: 'https://example.com/movie.m3u8', type: 'application/x-mpegURL' }] }); }); </script> ``` 2. **关键体验优化** - 手势控制:通过 `@touchstart`/`@touchend` 实现亮度/音量滑动手势 - 缓存策略:Service Worker 预加载下一集 - 播放历史:结合 `localStorage` 记录用户观看进度 3. **影视列表页** ```javascript // 虚拟滚动优化长列表(使用 vue-virtual-scroller) <RecycleScroller :items="movies" :item-size="120" key-field="id" > <template #default="{ item }"> <van-swipe-cell> <van-card :title="item.title" :thumb="item.poster" /> </van-swipe-cell> </template> </RecycleScroller> ``` --- ### **三、移动端专项优化** 1. **适配方案** ```javascript // postcss.config.js 配置 viewport 适配 module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, selectorBlackList: ['ignore-'] } } } ``` 2. **手势冲突处理** ```javascript // 禁止下拉刷新与播放器手势冲突 document.body.addEventListener('touchmove', (e) => { if (isPlayerArea(e.target)) { e.preventDefault() } }, { passive: false }) ``` 3. **性能提升** - 骨架屏:在 `beforeRouteEnter` 阶段展示预加载动画 - 分包加载:`vite.config.js` 配置按需加载第三方资源 --- ### **四、部署方案** 1. **静态资源部署** ```bash # 使用 Vite 打包 npm run build # 生成 dist 目录可部署至: - CDN(阿里云OSS+CDN加速) - Nginx 配置 gzip/brotli 压缩 - 服务端开启 HTTP2 提升加载速度 ``` 2. **灰度发布策略** - 通过 URL 参数区分测试环境(如 `?env=beta`) - 使用 Firebase Remote Config 动态控制功能开关 --- ### **五、扩展能力** 1. **混合开发支持** ```javascript // 通过 Capacitor 打包成 Android/iOS App import { Capacitor } from '@capacitor/core'; if (Capacitor.isNativePlatform()) { StatusBar.setBackgroundColor({ color: '#000000' }); } ``` 2. **数据埋点** ```javascript // 播放行为追踪 const trackEvent = useRUM(); // 封装性能监控SDK onBeforeUnmount(() => { trackEvent('video_play', { duration: currentTime.value, id: movieId.value }); }); ``` --- ### **学习资源推荐** 1. 官方文档: - [Vue3 中文文档](https://cn.vuejs.org/) - [Vant4 组件库](https://vant- [vue3-mobile-video-template](https://github.com/example/vue3-video-template) 3. 性能优化: - Chrome DevTools Lighthouse 评测 - Web Vitals 核心指标监控 通过上述方案,可快速搭建高性能影视 H5 应用,建议从基础播放功能入手,逐步迭代复杂功能。注意遵循移动端「点击延迟小于100ms、FMP 时间低于1.8s」等体验规范。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刺心疯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值