Vue 混入 插件 localStorage和sessionStorage

最新推荐文章于 2024-06-11 16:47:46 发布
最新推荐文章于 2024-06-11 16:47:46 发布
阅读量602 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71967396/article/details/127643800
版权

Vue 混入 插件 localStorage和sessionStorage

文章目录

1、vue项目目录介绍

node_modules： 文件夹，内部很多当前项目依赖的模块，可以删除，npm install
public： 文件夹

  • favicon.ico 网站小图标
  • index.html spa：单页面应用

src： 以后写的代码都在这下面

  • assets： 静态资源，js，css，图片 类似于static文件夹
    • logo.png 静态资源的图片
  • components 组件：小组件，用在别的大（页面组件）组件中
    • helloworld.vur 默认了一个hello world组件
  • router 装了vue-router自动生成的，如果不装就没有
    • index.js vue-router的配置
  • store 装了vuex自动生成的，如果不装就没有
    • index.js vuex的配置
  • views 放了一堆组件，页面组件
    • aboutView.vue 关于 页面组件
    • HomeView.vue 主页 页面组件
  • App.vue 根组件
  • main.js 整个项目启动入口

.gitignore git的忽略文件
babel.config.js babel的配置
jsconfig.json
package.json 重要：类似于python项目的requirements.txt 当前项目所有依赖
package-lock.json 锁定文件：package.json中写了依赖的版本，这个文件锁定所有版本
README.md 读我，项目的介绍
vue.config.js vue项目的配置文件

2、es6的导入导出语法

如果要导入，必须先导出
默认导出
命名导出

默认导出写法
写一个js，在js中定义变量，函数，最后使用export defalut 导出

export default {
    name:'彭于晏',
    printName(){
        console.log(this.name)
    }
}

在想使用的js中，导入

import 随便起 from './lqz/utils'

命名导出和导入
写一个js，在js中定义变量，函数，最后使用export 导出

export const name = '刘亦菲'
export const printName = () => {console.log('新宠')
                               }

在想使用的js中导入

import {printName} from './lqz/utils'

**在包下可以建立一个名为index.js 的文件，以后导入的时候，会默认找它 **
对比python中得__init__.py

3、项目开发规范

以后写的组件，都是单页面组件 使用xx.vue 以后写一个组件就是一个 xx.vue，页面租金啊和小组件
以后一个组件就是一个xx.vue 内部有三部分

<template></template>  # html内容写在里面
<script></script>      # 写js内容
<style></style>        # 写css样式

main.js 是整个入口

  1. 把App.vue根组件导入了，
  2. 使用new Vue({render: h => h(App)}).$mount('#app')把App.vue组件中得数据和模板，插入到了index.html的id为app div中了
  3. 以后，只要在每个组件中年export default{} 写之前学过的所有js的东向西
  4. 以后只要在每个组件的template，写模板，插值语法，指令。
  5. 以后，只要在每给组件的style，写样式

4、vue项目集成axios,vue项目前后端打通

  1. 安装axios
    npm insatall axios --S

  2. 导入使用
    import axios from 'axios'

  3. 发送请求 获取数据

    axios.get('http://127.0.0.1:8000/books/').then(res => {
    console.log(res.data)
	this.bookList =res.data})

先用这种方式解决跨域（django 项目）

  1. pip3 install django-cors-headers

  2. app中注册：

    INSTALLED_APPS = (
            ...
            'corsheaders',
            ...
        )

  3. 中间件注册

    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware',
        ...
        ]

  4. 把下面的复制到配置文件中

    CORS_ORIGIN_ALLOW_ALL = True
        CORS_ALLOW_METHODS = (
            'DELETE',
            'GET',
            'OPTIONS',
            'PATCH',
            'POST',
            'PUT',
            'VIEW',
        )
CORS_ALLOW_HEADERS = (
            'XMLHttpRequest',
            'X_FILENAME',
            'accept-encoding',
            'authorization',
            'content-type',
            'dnt',
            'origin',
            'user-agent',
            'x-csrftoken',
            'x-requested-with',
            'Pragma',
        )

5、props配置项

接收父传子
数组写法
对象写法
对象套对象写法

写法总结
普通使用
props:['msg'],

属性验证
pprops:{msg:String}

指定类型，必填和默认值

props:{
    msg:{
        type:String,  //类型
        required:true,  //是否必要
        deffault:'老王'  //默认值
    }
}

6、混入

mixin(混入) 可以把多个租金啊共用的配置提取成一个混入的对象
把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用

使用步骤

  1. 写一个mixin/index.js

    export const hunhe ={
    data() {
    return {
       name:'彭于晏'
    }
    },
    methods:{
        handlePrintName() {
            alert(this.name)
        }
    }
}

  2. 局部导入：在组件中

    import {hunhe} from "@/mixin";
mixins:[hunhe,]

  3. 全局使用，在main.js中 以后所有组件都可以用

    import {hunhe} from "@/mixin";
Vue.mixin(hunhe)

7、插件

功能：用于增强vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
使用步骤
写一个plugins/index.js

import Vue from "vue";
import axios from "axios";
import {hunhe} from '@/mixin'
export default {
        install(miVue) {
            // console.log(miVue)
            // 1 vue 实例上放个变量
            // Vue.prototype.$name = 'lqz'  // 类比python，在类上放了一个属性，所有对象都能取到
            // Vue.prototype.$ajax = axios

            // 2 使用插件，加入混入
            // 全局使用混入
            // Vue.mixin(hunhe)


            // 3 定义全局组件
            // 4 定义自定义指令  v-lqz
            Vue.directive("fbind", {
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value;
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                },
            });

        }
    }

8、scoped样式

在styple上写 <style scoped>  </style> #以后只针对于当前组件生效

9、 localStorage和sessionStorage

window浏览器有的东西
如果想在浏览器中存储数据，
永久存储：localStorage 不登陆加购物车，没登录 搜索过的商品
关闭页面 数据就没了（临时存储）：sessionStorage
设定一个事件，到时候就过期：cookie

补充：序列化和反序列化
对象转json字符串

//对象转json字符串 
// JSON.stringify(person)
// json字符串转对象
// JSON.parse()

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">点我向localStorage放数据</button>
    <button @click="getStorage">点我获取localStorage数据</button>
    <button @click="removeStorage">点我删除localStorage放数据</button>

    <h1>sessionStorage操作</h1>
    <button @click="saveSessionStorage">点我向localStorage放数据</button>
    <button @click="getSessionStorage">点我获取localStorage数据</button>
    <button @click="removeSessionStorage">点我删除localStorage放数据</button>

    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向localStorage放数据</button>
    <button @click="getCookie">点我获取localStorage数据</button>
    <button @click="removeCookie">点我删除localStorage放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      localStorage.setItem('userinfo', JSON.stringify(person))
    },
    getStorage() {
      let userinfo = localStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeStorage() {
      // localStorage.clear()
      localStorage.removeItem('userinfo')
    },

    saveSessionStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      sessionStorage.setItem('userinfo', JSON.stringify(person))
    },
    getSessionStorage() {
      let userinfo = sessionStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeSessionStorage() {
      // localStorage.clear()
      sessionStorage.removeItem('userinfo')
    },

    saveCookie() {
      cookies.set('name','lqz','7d')  // 按秒计
    },
    getCookie() {
      console.log(cookies.get('name'))
    },
    removeCookie() {

      cookies.remove('name')
    }
  }


}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

10、继承elementui

第三方 样式库 常见的
饿了么团队：elementui
iview
移动端的ui：vant

使用步骤
安装 npm i elemeent-ui -S
在main.js中引入

Tao.686
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中 localStorage的使用方法
balloonhunter的博客
06-23 3129
1.保存 localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken) 2.获取 localStorage.getItem('accessToken') 3.更改 localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken) 4.删除 localStorage.removeItem('accessToken
vue中 localStorage的使用方法（详解）
热门推荐
张铎
11-24 2万+
vue中实现本地储存的方法：localStorage，在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 (1) 储存数据 两种方式 方式一： localStorage.setItem('userName', '张三')； 方式二： localS...
vscode：已包含的文件名 “XXX.vue.js“ 仅大小写与文件名 “xxx.vue.js“ 不同
2301_76658894的博客
08-07 6884
当引入的文件名字改了大小写时，vue就报错。把文件名的后缀.vue去掉。
如何在Vue3中使用本地存储localStorage保存数据？
最新发布
有我更精彩的博客
06-11 1414
是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与不同，中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得成为持久化数据的理想选择，如用户设置、购物车信息等。Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用来保存数据。在这篇博客中，我们探讨了如何在 Vue3 中使用。
Vue3后台管理系统（五）永久缓存Local Storage
Good Luck
02-21 1万+
Vue3后台管理系统（五）永久缓存Local Storage
vue项目文件
CLN200308的博客
03-05 147
vue项目文件
详解Vue中localstorage和sessionstorage的使用
08-28
详解Vue中localstorage和sessionstorage的使用 在 Vue 项目中，localstorage 和 sessionstorage 是两个常用的客户端存储机制。它们可以帮助开发者存储一些数据，以便于后续使用。但是，在实际项目中，直接使用 ...
vue-web-storage另一个Vue.js插件，用于localStorage和sessionStorage-Vue.js开发
05-27
Vue Web存储一个用于Web存储的简约Vue.js插件功能选择localStorage或sessionStorage或两者都作为您存储的所有k的前缀。存储的键自动JSON.stringify和JSON.parse用于交叉表通信的事件安装＃yarn yarn添加vue-web-...
详解vue中localStorage的使用方法
12-09
总的来说，Vue中使用localStorage可以方便地在用户关闭和重新打开浏览器时保持应用状态，解决像Cookie那样需要刷新才能获取新值的问题。合理运用localStorage和sessionStorage，可以在不增加服务器负担的情况下，...
vue中使用localstorage来存储页面信息
08-28
Vue 中使用 LocalStorage 存储页面信息 在 Vue 中，LocalStorage 是一种常用的客户端存储方式，可以用来存储页面信息、本地数据等。...我们希望这个示例代码能够帮助您更好地理解 Vue.js 和 LocalStorage。
vue3监听localStorage
LILEILEILOVE的博客
10-21 3029
1.utils中创建方法。2.在main中引入。3.在使用的页面调用。
vue-storages:只是为了Vue应用localStorage sessionStorage cookie
05-01
序 这是一个关于浏览器cookie，sessionStorage，localStorage操作的插件，它增加并完善了原有API功能。该插件包括, , 三个部分，使用方法非常简单，直接引入即可。 vue-storages在vue开发环境下的使用方法 安装 采用npm方式安装： $ npm install vue-storages --save 或者采用yarn方式安装： $ yarn add vue-storages 模块导入与配制 import Vue from 'vue' import VueStorages from 'vue-storages' Vue.use(VueStorages, { localStorage: true sessionStorage: true, cookie: true }) demo export default { name
本地存储管理器「LocalStorage Manager」-crx插件
03-09
添加，编辑，删除，导出和导入本地存储和会话存储数据 源代码和bug跟踪器可在https://github.com/gabrielbarros/localstorage-manager上找到 ------------------- 添加，编辑，删除，导出和导入本地存储和会话存储数据。 ---------------------------------------- 根据维基百科，网络存储提供两个不同的存储区域 - 本地存储和会话存储 - 范围和生命周期不同。放置在本地存储中的数据是每个来源（在同源策略中定义的协议，主机名和端口号的组合）（数据可用于从先前存储数据的同一来源的页面加载的所有脚本）和浏览器关闭后仍然存在。会话存储是按照每个窗口或标签的来源，并且仅限于窗口的生命周期。会话存储旨在允许同一个Web应用程序的不同实例在不同的窗口中运行，而不会互相干扰，这是一个Cookie不能很好支持的用例。 支持语言:English (United States)
Vue封装本地存储localStorage/sessionStorage组件使用
总结前端开发中遇到的问题，分享前端知识
09-08 748
新建storage.js： export const local={ set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localStorage.getItem(key)); }, remove(key){ localStorage.removeItem(key); } } export const se
Vue3插件记录（持续更新）
weixin_45791692的博客
01-06 308
VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。core.js是Javascript库的补丁包，在如今ES的迅速发展下以及浏览器频繁的更新换代带了的ES语法在不同浏览器上的兼容成为一个问题，而core.js就是为了做兼容处理的，让我们在不兼容某种新特性的浏览器上使用新特性。
vue3实时监听LocalStorage的变化
青莳的博客
03-27 1385
【代码】vue实时监听LocalStorage的变化。
localStorage的高阶用法
qq_51076413的博客
07-04 419
localStorage 的高阶用法
Vue2.x storejs localStorage插件
黄彪博客
08-02 1567
文章目录文章参考安装API 使用 文章参考 https://github.com/jaywcjlove/store.js 数据存储插件(store.js)的使用指南 安装 npm install store -D API 使用 // 存储变量到user键 store.set('user', { name:'Marcus' }) //获取内容 store.get('user') // ...
Vuex持久化插件，同时配置sessionStorage，localStorage两种方式
meteorites的博客
08-08 2283
本文主要讲解使用vuex-persistedstate持久化插件过程中，如果想同时配置sessionStorage，localStorage两种方式该如何处理； 插件详细使用教程，请浏览另一篇文章：https://blog.csdn.net/qq_42205731/article/details/99979034 先贴代码 plugins: [createPersistedState({ // localStorage持久化处理 reducer(cache) { return .
详解vue中localstorage和sessionstorage的使用
08-23
在Vue中，可以使用LocalStorage和SessionStorage来进行本地存储。LocalStorage用于长期存储数据，即使关闭浏览器后数据仍然存在，而SessionStorage则用于临时存储数据，关闭浏览器后数据会被清除。 要在Vue中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值