vue缓存数据有4种方式:1、利用localstorage,语法“localstorage.setitem(key,value)”;2、利用sessionstorage,语法“sessionstorage.setitem(key,value)”;3、安装并引用storage.js插件,利用该插件进行缓存;4、利用vuex,它是一个专为vue.js应用程序开发的状态管理模式。
本教程操作环境:windows7系统、vue3版,dell g3电脑。
vu中实现缓存的几种方式:
前两种* localstorage
window.localstorage.setitem(key,value) window.localstorage.getitem(key)
* sessionstorage
window.sessionstorage.setitem(key,value) window.sessionstorage.getitem(key)
localstorage和sessionstorage区别
https://blog.csdn.net/qq_31741481/article/details/88054069
第三种(推荐)- storage.js使用方式:
import storage from 'store'// store current userstore.set('user', { name:'marcus' })// get current userstore.get('user')// remove current userstore.remove('user')// clear all keysstore.clearall()// loop over all stored valuesstore.each(function(value, key) { console.log(key, '==', value)})
测试得出,默认存储在localstorage中
store.js包含了各种存储的解决方案,比如在某些localstorage失效的场景中,可以使用cookiestorage.js。掌握它,基本可以一网打尽缓存解决方案。
all.js all the storages in one handy place.localstorage.js store values in localstorage. great for all modern browsers.sessionstorage.js store values in sessionstorage.cookiestorage.js store values in cookies. useful for safari private mode.memorystorage.js store values in memory. great fallback to ensure store functionality at all times.oldff-globalstorage.js store values in globalstorage. only useful for legacy firefox 3+.oldie-userdatastorage.js store values in userdata. only useful for legacy ie 6+.更多介绍参考官方:store.js(https://github.com/marcuswestin/store.js#readme)
第四种 - vuex适用构建较为复杂的vue单页应用。
vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex 也集成到 vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
【相关推荐:《vue.js教程》】
以上就是vue的缓存有几种实现方式的详细内容。