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. avcodec_open2()分析

    该函数用于初始化一个视音频编解码器的AVCodecContext. int avcodec_open2(AVCodecContext *avctx, const AVCodec *codec, AVD ...

  2. 线段树 + 区间更新: HDU 4893 Wow! Such Sequence!

    Wow! Such Sequence! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  3. jquery+easyui开发、培训文档

    目  录 1.... Accordion(可折叠标签)......................................................................... ...

  4. Python 类的多态

    #python的多态 class Dog(): def eat(self): print("i am dog , eat something . ") class Cat(): d ...

  5. 《Qt数据类型》--QByteArray,QString,int,hex之间的转化

    对于QString和QByteArray,他们都有一个toInt的静态函数,QString::toInt()是根据string的字面值转化为int类型,比如string:"123" ...

  6. C#往SQLServer中插入大数据

    以前插入大数据的时候都是一条一条的插入,由于电脑配置不行,有一次17万条数据用了半个小时才插入完成,那个蛋疼啊! 前面听杨中科老师的课,发现一个很好的东西,25万条数据配置好的电脑几秒钟就完成了,那是 ...

  7. python numpy的transpose函数用法

    #MXNET的N*C*H*W在numpy打印时比较直观#mxnet卷积层# 输入数据格式是:batch * inchannel * height * width# 输出数据格式是:batch * ou ...

  8. 第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询

    第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...

  9. Lucene系列五:Lucene索引详解(IndexWriter详解、Document详解、索引更新)

    一.IndexWriter详解 问题1:索引创建过程完成什么事? 分词.存储到反向索引中 1. 回顾Lucene架构图: 介绍我们编写的应用程序要完成数据的收集,再将数据以document的形式用lu ...

  10. Java如何创建用户自定义异常?

    在Java编程中,如何创建用户自定义异常? 此示例显示如何通过扩展Exception类来创建用户定义的异常. package com.yiibai; class MyException extends ...