在vue中优雅的使用LocalStrong
h5的LocalStrong帮我们缓存一些数据到本地,最常用的使用场景,比如京东购物在未登陆的状态下,把商品加入购物车,收藏某个商品。当我们把url复制到另外一个浏览器,购物车就是空的。
以下是一个简单的商品收藏小demo,让我们在未登陆的状态下收藏某个商品。这个例子是学习vue时,看了仿饿了么教程,并把它提取出来,已做备用。
stroe.js:
// 此函数用来缓存数据
export function saveToLocal(id, key, value) {
// 创建储存对象
let seller = window.localStorage.__seller__;
if (!seller) {
seller = {};
// 通过id向__seller__添加一个空缓存对象
seller[id] = {};
} else {
// eg: JSON.parse('{"1":"123","2":"456"}')
// result: {1:"123",2:"456"}
seller = JSON.parse(seller);
if (!seller[id]) {
seller[id] = {};
}
}
seller[id][key] = value;
// localStorage只能存储字符串
// eg: JSON.stringify({1:"123",2:"456"})
// result: "{"1":"123","2":"456"}"
window.localStorage.__seller__ = JSON.stringify(seller);
}; // 此函数返回一个布尔值
export function loadFromLocal(id, key, def) {
let seller = window.localStorage.__seller__;
// 默认值
if (!seller) {
return def;
}
// 从id下获取缓存的对象
seller = JSON.parse(seller)[id];
if (!seller) {
return def;
}
let ret = seller[key];
return ret || def;
};
使用方法:
<tempalte>
<div class="favorite" @click="toggleFavorite">
<span :class="{'active':favorite}">❤</span>
</div>
</tempalte>
<script>
import {saveToLocal, loadFromLocal} from 'store.js';
export default {
// 父组件传过来一个id
props: ['id'],
data() {
return {
favorite: (() => {
// 返回该id下 key为favorite的所对应的value,默认为false
return loadFromLocal(this.id, 'favorite', false);
})()
}
}
methods: {
toggleFavorite() {
this.favorite = !this.favorite;
// 把该id下 key为favorite的所对应的value 缓存起来
saveToLocal(this.id, 'favorite', this.favorite);
}
}
}
</script>
<style>
.active {
color: red;
}
</style>
代码加了注释
在vue中优雅的使用LocalStrong的更多相关文章
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- 在vue中优雅地实现简单页面逆传值
[需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...
- 如何在Vue项目中优雅的使用sass
开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...
- Vue.js优雅的实现列表清单的操作
一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...
- Vue.js优雅的实现列表清单
一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- 详解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- Redis PHP连接操作
安装 在PHP程序中使用Redis,需要确保我们有Redis的PHP驱动程序和PHP安装设置在机器上.可以查看PHP教程教你如何在机器上安装PHP.现在,让我们来看看一下如何设置Redis的PHP驱动 ...
- springmvc访问静态资源出现Request method 'GET' not supported
答案最后.:D 默认的访问的URL都会被DispatcherServlet所拦截. 这里说一下如何配置springmvc访问静态文件. <mvc:default-servlet-handler/ ...
- webrtc 源码结构
api WebRTC 接口层.包括 DataChannel, MediaStream, SDP相关的接口.各浏览器都是通过该接口层调用的 WebRTC. call 存放的是 WebRTC “呼叫(Ca ...
- 微信小程序——页面之间传递值
小程序页面传值的方式: 1.正向传值:上一页面 --> 下一页面 url传值 本地储存 全局的app对象 2.反向传值:下一页面 --> 上一页面 本地储存 全局的app对象 先说一下 ...
- android视频双向实时通讯的横竖屏切换
大概的样子是酱婶儿的 点击全屏按钮时执行setRequestedOrientation方法,此时希望得到的结果是surfaceview界面全屏且横屏显示,并且在横屏时Activity没有被重新创建,这 ...
- 数据框排序 data.frame order
# sorting examples using the mtcars datasetattach(mtcars) # sort by mpgnewdata <- mtcars[order(mp ...
- [J2EE]web.xml各个版本模板
J2EE1.3 Servlet2.3 JSP1.2 <?xml version="1.0" encoding="ISO-8859-1"?> < ...
- Eclipse导入到web项目没有run on server
由于以前的项目都是用myeclipse开发的,现在要换成eclipse来开发.但是项目导入到eclipse中发现该项目并不是web项目,也不能部署到tomcat里面去. 现在解决了这个问题了. ...
- 关于Unity中变量和函数的定义
变量 1.匀速运动的物体都要记得定义一个speed速度变量 2.不断产生很多相同物体的事件要记得定义时间生成物体的间隔rate,并且有一个一达到rate的值就清0的累加时间变量,累加时间变量是通过Ti ...
- SpagoBI 教程 Lesson 3: Highchart Dashboards
SpagoBI Lesson 3: Highchart Dashboards Business Intelligence dashboards Every car comes with a dash ...