关于localStorage储存多个数据

localStorage:

是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使关闭了客户端(浏览器),属于本地持久层储存

sessionStorage:

用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。


localStorage只能存字符串,如果需要存对象,首先要转化为字符串 利用JSON.stringify() ( 存单个就不用考虑这些了 )

setItem 存

let rowVal = {
        bCode: row.gymnasium.code,
        bName: row.gymnasium.name,
        bAddress: row.gymnasium.address,
        bCoachName: row.coach.name,
        bCozchNickName: row.coach.nickname,
        bIphone: row.coach.phoneNumber
};
localStorage.setItem("rowVal", JSON.stringify(rowVal));

然后取出rowVal对象用JSON.parse() 再把字符串转为对象( 然后用哪个 "." 哪个就行了 )

getItem 取

computed: {
    rowVal() {
      const rowVal = JSON.parse(localStorage.getItem("rowVal"));
      return rowVal;
    }
 }

原文地址:https://www.cnblogs.com/home-/p/11777243.html

时间: 2024-11-06 22:18:22

关于localStorage储存多个数据的相关文章

localStorage储存数据和处理数据

//一.在A页面保存数据var oChannelList = document.getElementById('ullisttop');var aChannerListLi = oChannelList.getElementsByTagName('li');var oBatchBtn = document.getElementById('batchbtn');var aBatchBtnDd = oBatchBtn.getElementsByTagName('dd');var oListDdtil

localStorage 储存与读取

window.onload=function(){ /** *其实也没那么难, *localStorage.setItem(json) 向本地储存值 *window.localStorage["键"] 得到本储存的值 */ var setl = document.getElementById("setl"); setl.onclick=function(){ var name = document.getElementById('name').value; loca

vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据

需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 2.改用query进行传参后,页面刷新后图片无法加载,这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值,而赋值之后页面已经渲染完成,导致图片无法加载成功 解决方案: 1.通过localStorage将数据持久化,在跳转到当前路由时,先使用localStorage将数据持久

html5:localStorage储存

实例:刷新值会增长,关掉浏览器,再打开,值会在原基础上增长 if(localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount)+1; }else{ localStorage.pagecount=1; } document.write(localStorage.pagecount); 设置和取值两种方法: 1.操作dot 设值 localStorage.hello = 'world'; localSto

HTML5 LocalStorage 本地存储JSON数据

JSON数据存储在本地,需调用JSON.stringify()将其转为字符串.读取出来后调用JSON.parse()将字符串转为json格式.如写入的时候: var json_data = {id:12,name:"yang",email:"[email protected]"}; storage.setItem("json_data",JSON.stringify(json_data)); 读取的时候: var json_data = JSON

MySQL函数转储存(当前月数据同步)

1 BEGIN 2 declare a1 int default 0;#第一次循环的循环变量 3 declare a2 int default 0; 4 declare b1 int default 0; 5 declare b2 int default 0; 6 declare c1 int default 0; 7 declare c2 int default 0; 8 declare d1 int default 0; 9 declare d2 int default 0; 10 decl

html5储存方式(demo:localStorage)

在html5前端的开发过程,如果想要储存用户信息,势必用到本地储存,小果今天就来说一说本地储存的这些事情. 存储方式 cookie:long long ago,作为浏览器端的"甜甜圈",用来方便用户进行本地临时储存信息.你走过的路(浏览的网页),你留下的痕迹(密码.ID),我来帮你记下(设定存储路径,进行本地存储),方便你再次光临(二次登陆和访问).只是,4kb大小,不够用啊~ localStorage:html5出现的新标签,5MB大小,够用了. sessionStorage:页面关

wemall app商城源码Android数据的SharedPreferences储存方式

wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android数据的SharedPreferences储存方式,供技术员参考学习.        SharedPreferences:除了SQLite数据库外,SharedPreferences也是一种轻型的数据储存方式,它的本质是基于XML文件存储key-value键值对数据,通常用来储存一些简单的配置信息.Sha

Android数据储存

Android提供了三种数据储存的方式,分别为: 1.文件储存--文件存储数据使用了Java中的IO操作来进行文件的保存和读取 2.SharedPreferences储存--SharedPreferences可以存取简单的数据 3.Sqlite储存--Sqlite是一个Android内建的轻量级数据库 下面会用三个章节分别介绍这三种储存方式 Android数据储存--文件储存 Android数据储存--SharedPreferences储存 Tips:很多文章认为Android的数据储存有5种,