问题:使用EChart动态绘制多折线图:每一次通过Ajax请求,后端返回一组数据,在同一个坐标系中渲染;
如果按照基本的操作,一组后端数据对应前端一条曲线,而且,每当后面返回数据之后,前面的曲线就会被覆盖掉,
所以,问题来了,怎么才能,让所有的曲线都能保留在同一个坐标系中,方便多条曲线进行对比?
解决:
方法一:在后端处理,想到了使用将每次的数据再传回后端,并保存在数据库中,前端请求的时候,去数据库中读取,分析之后,效率太低,没有采用。
方法二:在前端处理,将之前的数据,保留在前端localStorage中,每次渲染新的曲线,将之前的数据都拿出来,整合之后(因为,每次请求的数据长度不定),进行新的渲染。
经试验之后,方法二,还是能满足需求。
但是查阅,localStorage的使用,总结如下:
window.localStorage存储的数据保存在浏览器会话中。localStorage
类似 sessionStorage
,但其区别在于:存储在 localStorage
的数据可以长期保留;而当页面被关闭时,存储在 sessionStorage
的数据会被清除 。
无论数据存储在 localStorage
还是 sessionStorage
,它们都特定于页面的协议。
另外,localStorage
中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
常见的方法:
①clear():删除所有值。
②getItem(name):根据指定的名字name获取对应的值
③key(index):在指定的数字位置获取该位置的名字。
④removeItem(name):删除由name指定的名值对
⑤setItem(name,value):为指定名字设置一个对应的值
使用sessionStorage和localStorage的好处是:
(1)缓存数据
(2)减少对内存的占用。
发现了问题:当我们都需要保存一些对象类型的数据,字符串类型的数据就满足不了需求。
就有了怎么将字符串数据类型转化为对象数据类型:
var obj = { name:'Jim' }; var str = JSON.stringify(obj); //存入 sessionStorage.obj = str; //读取 str = sessionStorage.obj; //重新转换为对象 obj = JSON.parse(str); localStorage也一样,只是和sessionStorage的存储时间不一样。 //需要注意的是,JS中的数组本质上也是对象类型,所以上面的代码对数组也是适用的。 var arra=[1,2,3,4]; localStorage.setItem('key',JSON.stringify(arra)); var read=JSON.parse(localStorage.getItem('key')); console.log(read,read.length);
详细的使用方法可以参见:https://www.html.cn/qa/javascript/19942.html