在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>

代码加了注释

vue3中如何优雅地在setup使用globalproperties(代码片段)

一、前言vue3已经发布到v3.2.x版了，在项目中也使用上了vue3，总体感觉还是不错的。vue3中使用Proxy来实现响应式数据，解决了vue2中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问... 查看详情

vue优雅使用技巧(一)

参考技术Asrc/directives/index.js可以通过require.context方法优化Vue.mixin:全局注册一个混入，会影响之后的创建的每一个Vue实例对象，谨慎使用全局混入！！！一般推荐使用局部混入。场景：我们有一对组件,例如提示框和模态框，他们... 查看详情

如何在vue中优雅地使用v-if判断(代码片段)

情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。<template><divclass="card"... 查看详情

如何在vuejs中优雅使用javascript各种插件

在日常开发中，为了敏捷开发或者更快满足业务需求，不得不使使用js第三方库或者插件。如何在Vue项目中引入javascript第三方库 全局变量将JavaScript第三方库添加到项目中，最简单的办法是通过将其附加到 window 对象... 查看详情

优雅地使用vscode来编辑vue文件

...对vue也不是原生支持的，今天来扒一扒如何配置vscode以便优雅地编辑vue文件先来扒一扒使用PHPStorm遇到的问题：vue文件虽然可以通过插件来解决高亮问题，但是 <script> 标签中的ES6代码的识别老是出问题，箭头函数有... 查看详情

新手如何在vue项目中优雅的使用ueditor（百度富文本编辑器）(代码片段)

1、去官网，下载ueditor，解压，重命名，放在vue项目中的static文件夹下。　　ps：新手会觉得在官网上有几种不同版本的文件，俺到底要下载哪一个，如果你仅仅是一个前端，那么好，只要是最新版本的UEditor，随便下，如果你比... 查看详情

优雅的处理vue注册全局组件(代码片段)

使用情景：　　有频繁使用的组件需要进行全局注册　　可以将这些组件都放在components下同一个文件夹下，在此文件夹中建立一个js文件代码如下：　　importVuefrom‘vue‘;//修改文件名首字母大写functionchangeComponentName(str)returnstr.ch... 查看详情

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

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

如何优雅地使用vscode来编辑vue文件

参考技术A不可能，目前暂无一个软件能取代LaTeX排版之王的地位。当然，LaTeX的模式并不是每个人都喜闻乐见的。在加之微软统治下的用户恶习，使得大家更倾向于Word的使用。又，题主将Word与LaTeX类比，显然和论文排版有关。 查看详情

猿创征文vue3企业级优雅实战-组件库框架-7组件库文档的开发和构建(代码片段)

...手架：快速创建vue3组件库和vue3全家桶项目Vue3企业级优雅实战-组件库框架-1搭建pnpmmonorepoVue3企业级优雅实战-组件库框架-2初始化workspace-rootVue3企业级优雅实战-组件库框架-3搭建组件库开发环境Vue3企业级优雅实战-组件库框架-... 查看详情

cookie，session，sessionstroage和localstrong的区别

...务端缓存，其对象保存在服务器上。cookie、sessionStroage、localStrong是客户端缓存，其对象保存在浏览器。session对象保存在服务器上。实际上，服务器和浏览器之间仅仅需要sessionid即可，服务器根据sessionid找到对应用户的session对象... 查看详情

如何优雅地使用vscode来编辑vue文件？

...对vue也不是原生支持的，今天来扒一扒如何配置vscode以便优雅地编辑vue文件先来扒一扒使用PHPStorm遇到的问题：vue文件虽然可以通过插件来解决高亮问 查看详情

2022-06-16——在vue中更优雅的封装第三方组件

...写一个分页组件，在原有基础上封装就好，那么如何快速优雅的封装一个第三方组件库的组件呢？v-bind="attrs"和v−on="attrs"和v-on="attrs"和v−on="listeners"="$listeners"，会给我们带来惊喜。它们可以使得封装后的组件，“继承”... 查看详情

如何在nodejs项目中优雅的使用es6

如何在NodeJS项目中优雅的使用ES6NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：--harmony。但是，即使如此node也还是没有支持全部的... 查看详情

springboot实战：在requestbody中优雅的使用枚举参数(代码片段)

...Christian_Crowd在Pixabay上发布你好，我是看山。前文说到优雅的使用枚举参数和实现原理，本文继续说一下如何在RequestBody中优雅使用枚举。本文先上实战，说一下如何实现。在优雅的使用枚举参数代码的基础上，我... 查看详情

编写vuev-for循环更优雅的7种方式(代码片段)

在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环。这在碰到诸如以下情况时特别好用：渲染数组或列表遍历对象属性在Vue中v-for循环最基本的用法是这样的：<ul>  <li v-for=... 查看详情

编写vuev-for循环更优雅的7种方式(代码片段)

在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环。这在碰到诸如以下情况时特别好用：渲染数组或列表遍历对象属性在Vue中v-for循环最基本的用法是这样的：<ul>  <li v-for=... 查看详情

在webapp中优雅地关闭ExecutorService？

】在webapp中优雅地关闭ExecutorService？【英文标题】：ShutdownExecutorServicegracefullyinwebapp?【发布时间】：2012-09-3016:53:59【问题描述】：在我的web应用程序中，我创建了一个使用具有固定大小线程池的ExecutorService的服务。我在整个应用... 查看详情