再也不怕面试官问会造轮子吗?前端学会造轮子,提高你的代码复用率、增强面向对象的编程思维

news/2024/7/10 22:50:13 标签: javascript, es6, typescript, node.js
大家好我是前端新手小猿同学: 这篇文章主要给大家简单介绍一下在Vue项目中封装cookie、localStorage工具类希望对大家的学习进步有所帮助,当然文章中可能存在理解不正确的地方希望大家可在评论区相互讨教,共同进步。。 **1.与static文件同级新建utils文件夹,在utils文件夹下创index.js文件, 在main.js中引入utils文件。**
javascript">import utils from './utils'
Vue.use(utils);

在index.js中定义工具类

javascript">let prototype = {
//1.localStorage工具类
$setStroage(key,value){
  window.localStorage.setItem(key,value)
}
$getStroage(key){
   window.localStorage.getItem(key)
}
$removeStroage(key){
  window.localStorage.removeItem(key)
}
//2.cookie工具类
$setCookie(cname, cvalue, exdays) {
//exdays 过期时间
 var d = new Date();
 d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
 var expires = "expires=" + d.toGMTString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
}
$getCookie(cname) {
 var name = cname + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
   var c = ca[i].trim();
   if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
 }
 return ""
 } 
$delCookie (name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = this.$getCookie(name);
  if (cval != null)
  document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};
}
let utils = function (Vue) {
  for (let i in prototype) {
    Vue.prototype[i] = prototype[i]
  }
};
export default utils

使用:

javascript">this.$setStroage('name','张三')
this.$getStroage('name')

http://www.niftyadmin.cn/n/1319008.html

相关文章

怎样将UNIX Shell作为Concurrent Program来运行

通常在Oracle ERP系统中需要有数据导入的工作&#xff0c;比如各个模块的期初数据。这些数据导入的工作都是由客户方的人员在Oracle ERP系统中运行特定的Concurrent Program来执行的&#xff0c;也就是操作人员点几下鼠标&#xff0c;提交一个请求的事情。 那么如何实现数据导入…

Node+Express实现后台服务器搭建

文章目录前言一、创建后台服务&#xff1f;二、定义对应的路由模块三、前端访问前言 大家好我是前端新手小猿同学&#xff1a; 这篇文章主要给大家简单介绍一下NodeExpress实现后台服务器搭建希望对大家的学习进步有所帮助&#xff0c;当然文章中可能存在理解不正确的地方希望…

浅谈UML学习笔记动态图之状态图和活动图

1、状态图 我先简单的理解一下&#xff0c;什么是状态机&#xff1f; 在日常生活中&#xff0c;状态机&#xff0c;我们理解为记录下给定时刻状态的机器&#xff0c;根据不同的输入对每个给定的变化而改变其状态或引发一个动作。 在UML中&#xff0c;状态机由对象的各个状态和连…

ORACLE for update和for update nowait的区别

一.for update 和 for update nowait 的区别 首先一点&#xff0c;如果只是select 的话&#xff0c;Oracle是不会加任何锁的&#xff0c;也就是Oracle对 select 读到的数据不会有任何限制&#xff0c;虽然这时候有可能另外一个进程正在修改表中的数据&#xff0c;并且修…

Node.js 连接MySQL数据库

目录前言一、安装插件二、创建连接三、查询实例前言 大家好我是前端新手小猿同学&#xff1a; 这篇文章主要给大家简单介绍一下如何使用Node.js 连接MySQL数据库希望对大家的学习进步有所帮助&#xff0c;当然文章中可能存在理解不正确的地方希望大家可在评论区相互讨教&#…

SQL Server误区30日谈-Day28-有关大容量事务日志恢复模式的误区

本系列文章是我在sqlskill.com的PAUL的博客看到的&#xff0c;很多误区都比较具有典型性和代表性&#xff0c;原文来自T-SQL Tuesday #11: Misconceptions about.... EVERYTHING!!,希望对大家有所帮助。 误区 #28:有关大容量事务日志恢复模式的几个误区 28 a)常见的DML操作可以…

HTML5自定义属性对象Dataset简介

一.html5 自定义属性介绍 HTML5中自定义合法属性data-,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性&#xff0c;来进行一些数据的存放&#xff0c;例如我们要在一个文字按钮上存放相对应的id&#xff1a; <a href"javascript:" data-id&…

Node.js 连接MongoDB数据库

文章目录前言一、安装MongoDB插件二、创建连接三、数据库操作前言 大家好我是前端新手小猿同学&#xff1a; 这篇文章主要给大家简单介绍一下如何使用Node.js 连接MongoDB数据库实现增删改查的基本功能希望对大家的学习进步有所帮助&#xff0c;当然文章中可能存在理解不正确的…