Vue基于localStorage存储信息代码实例

2024-08-01 12:07:16

一什么是localStorage

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是:

当我们首次访问设置Cookie的页面时，服务器会把设置的Cookie值通过响应头发送过来，告诉浏览器将cookie存储的本地相应文件夹中（注意:第一次访问时本地还没有存储Cookie,所以此时获取不到值）;

当第二次访问(或在进行cookie设置后,过期前所有的访问)时，请求头信息你中都会把Cookie值携带。(百度到的,暂时还没理解透彻,先搬过来).二使用方法

注意:sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON,所以这里就只列举localStorage

1 保存

//对象
const info = { name: 'hou', age: 24, id: '001' };
//字符串
const str="haha";
localStorage.setItem('hou', JSON.stringify(info));
localStorage.setItem('zheng', str);

2 获取

var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng');　

3 删除

//删除某个
localStorage.removeItem('hou');
//删除所有
localStorage.clear();

4 监听

Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage
window.addEventListener('storage', function (e) {
　　console.log('key', e.key); console.log('oldValue', e.oldValue);
　　console.log('newValue', e.newValue); console.log('url', e.url);
})

5浏览器中查看

vue中实践

根据我的需求来的一个默认记住上次选择的,很简单

添加数据的时候,下次添加默认记住我上次的选择

所以,在添加或者提交的时候存储值即可,

localStorage.setItem('projectId',me.workhourData.projectId+","+me.workhourData.projectManager);在打开新建页面的时候获取一下就好了,只需要判断非空就行

//记住上次选中的审核人
      if(localStorage.length>0){
        var mydata = localStorage.getItem('projectId');
        if(mydata!=null){
          var arr3=mydata.split(",");
          if(arr3[0]==me.workhourData.projectId){
            me.workhourData.projectManager=arr3[1];
          }
        }
      }

7 注意点

localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
sessionStorage作用域是窗口、协议、主机名、端口。

知道了这些知识点后，你的问题就很好解决了。
localStorage是window上的。所以不需要写this.localStorage，vue中如果写this，是指vue实例。会报错

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 界面刷新数据被清除 localStorage的使用详解

localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1.新建一个store.js文件 localStorage只能存储字符串
vue生成token保存在客户端localStorage中的方法

前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据. 我们后端有这样一个接口: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就向clients(理解为用户表即可)里面去生成一个token 这里的client_appid 就相当于用户名,client_appkey 就相当于密码. 这样后端认证之后会生成一个access-token,我们需要把这个ac
使用vuex存储用户信息到localStorage的实例

1.首先需要装vuex npm install vuex -d 2.新建store文件夹,新建index.js, 并引入vue.vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: functi
详解Vue中localstorage和sessionstorage的使用

1. 项目使用中暴露出来的几个问题大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法封装storage的使用方法,统一处理规范storage的key值的命名规则规范storage的使
如何在Vue中使localStorage具有响应式(思想实验)

响应式是Vue.js的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个问题时,让Vue响应式与 localStorage 一起使用. 如果运行以下代码,则会看到计数器显示为静态值,并且不会像我们期望的那样发生变化,这是因为setInterval在 localStorage 中更改了该值. new Vue({ el: "#counter", data:
vue使用localStorage保存登录信息适用于移动端、PC端

众所周知,vue可以用来开发移动端app,可以使用hbuilder将build好的vue打包成一个移动端app,但是用过之后就会发现,使用cookies或者session保存登录的token,在手机端无法保存,每次打开app依然提示登录.那么我们可以使用localStorage来保存登录信息就可以了,具体代码如下 1.vuex stroe代码 index.js import Vue from 'vue' import vuex from 'vuex' import { login, logout
详解vue中localStorage的使用方法

什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在所以上次使用cookie的时候就遇到了一个坑,设置后
vue中使用localstorage来存储页面信息

今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻. 环境搭建: 参考:vue API 超简单的Vue.js环境搭建教程详情: npm install --global vue-cli vue init webpack vue-project 然后: cd vue-project npm install 如果你配置了淘宝镜像,也可以用cnpm install
vue 关闭浏览器窗口的时候,清空localStorage的数据示例

如果是用vue做的单页面程序的时候,将监听的方法放在App.vue是最灵活的 <template> <div id="main" class="app-main"> <router-view></router-view> </div> </template> <script> export default { data () { return { theme: this.$store
Vue基于localStorage存储信息代码实例

一什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在所以上次使用cookie的时候就遇到了一个坑,设置后马上
Vue使用localStorage存储数据的方法

本文实例为大家分享了Vue使用localStorage存储数据的具体代码,供大家参考,具体内容如下通过下面这个案例来了解localStorage的基本使用方法. 输入评论人.评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表. 1.先组织出一个最新评论数据对象 var comment = {id:Date.now(), user:this.user, content:this.content} 2. 把得到的评论对象,保存到localStorage中 1.l
Python爬取当当、京东、亚马逊图书信息代码实例

注:1.本程序采用MSSQLserver数据库存储,请运行程序前手动修改程序开头处的数据库链接信息 2.需要bs4.requests.pymssql库支持 3.支持多线程 from bs4 import BeautifulSoup import re,requests,pymysql,threading,os,traceback try: conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='root',
vue之浏览器存储方法封装实例

如下所示: export function isObject (val) { return val !== null && typeof val === 'object' } export function setStore (key, val, type = 'localStorage') { if (isObject(val)) window[type].setItem(key, JSON.stringify(val)) else window[type].setItem(key, v
Python爬取豆瓣视频信息代码实例

这篇文章主要介绍了Python爬取豆瓣视频信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下这里是爬取豆瓣视频信息,用pyquery库(jquery的python库). 一:代码 from urllib.request import quotefrom pyquery import PyQuery as pqimport requestsimport pandas as pddef get_text_page (movie_name)
Python爬取爱奇艺电影信息代码实例

这篇文章主要介绍了Python爬取爱奇艺电影信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一,使用库 1.requests 2.re 3.json 二,抓取html文件 def get_page(url): response = requests.get(url) if response.status_code == 200: return response.text return None 三,解析html文件我们需要的电影信
JavaScript基于ajax编辑信息用法实例

本文实例讲述了JavaScript基于ajax编辑信息的方法.分享给大家供大家参考.具体如下: // Requires prototype.js function edit(action, obj) { Element.hide(obj); var textarea ='<div id="' + obj.id + '_editor"><input type="text" id="' + obj.id + '_edit" name
vue中格式化时间过滤器代码实例

本文实例为大家分享了vue格式化时间过滤器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <
Vue Echarts实现可视化世界地图代码实例

Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js
vue无限轮播插件代码实例

思路: 要实现无限轮播,需要在轮播图前后各加一张图片,加在前面的是轮播图的最后一张图片(重复的),加在后面的是轮播图的第一张图片(重复的).例: <div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wrapper-content_img&q

Vue基于localStorage存储信息代码实例

相关推荐

随机推荐