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的更多相关文章

  1. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  2. 在vue中优雅地实现简单页面逆传值

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...

  3. 如何在Vue项目中优雅的使用sass

    开始之前,请先确保有一个基于webpack模板的项目(vue-cli脚手架一键安装~) 1.打开项目终端,安装sass的依赖包 npm install --save-dev sass-loader / ...

  4. Vue.js优雅的实现列表清单的操作

        一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...

  5. Vue.js优雅的实现列表清单

        一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...

  6. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  7. 详解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  8. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  9. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 【异常】IOException parsing XML document from class path resource [xxx.xml]

    1.IDEA导入项目运行出现异常 org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing ...

  2. Spring Cloud 获取注册中心所有服务以及服务下的所有实例

    注册中心现有服务与实例数: 在任意客户端填写如下代码: /** * import org.springframework.cloud.client.ServiceInstance; * import ...

  3. scrapy 报错 no module named win32api 的解决方案

    解决方案: 原因是缺少win32,到 http://sourceforge.net/projects/pywin32/files/ 找到对应的版本进行下载,直接安装即可 =============== ...

  4. PCL点云特征描述与提取(2)

    点特征直方图(PFH)描述子 正如点特征表示法所示,表面法线和曲率估计是某个点周围的几何特征基本表示法.虽然计算非常快速容易,但是无法获得太多信息,因为它们只使用很少的几个参数值来近似表示一个点的k邻 ...

  5. CREATESTRUCT cs 结构体

    PreCreateWindow(CREATESTRUCT& cs) typedef struct tagCREATESTRUCT { LPVOID lpCreateParams; // 创建窗 ...

  6. Java设计模式(14)责任链模式(Chain of Responsibility模式)

    Chain of Responsibility定义:Chain of Responsibility(CoR) 是用一系列类(classes)试图处理一个请求request,这些类之间是一个松散的耦合, ...

  7. css限制显示字数,文字长度超出部分用省略号表示【转】

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. (1).文字超出一行,省略超出部分,显示'...' 如果这种情况比较多,可以取一个切合作用的 ...

  8. WM_CONCAT字符超过4000的处理办法

    参考网址: http://stackoverflow.com/questions/11541383/ordering-by-list-of-strings-in-oracle-sql-without- ...

  9. [转]java加密算法简要介绍

    本篇内容简要介绍BASE64.MD5.SHA.HMAC几种加密算法.     BASE64编码算法不算是真正的加密算法.     MD5.SHA.HMAC这三种加密算法,可谓是非可逆加密,就是不可解密 ...

  10. Spring系列-JDBC实例

    前言:spring沾过一点点,但细节不了解,实例能力也不行,决定从头学起吧. 没有理论,只有实例代码,理论自行百度多的很的很 帖一下项目整体架构: 1.数据库建表 CREATE TABLE `cust ...