这篇文章主要讲解了“vue的缓存实现方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的缓存实现方式有哪些”吧!
vue实现缓存有4种方式:1、利用localStorage;2、利用sessionStorage;3、安装并引用storage.js插件;4、利用vuex,它是一个专为Vue.js应用程序开发的状态管理模式
本教程操作环境:windows7系统、vue2.9.6版,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的缓存实现方式有哪些”的内容了,经过本文的学习后,相信大家对vue的缓存实现方式有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!