localStorage的使用
（1）使用highcharts来绘制柱状范围图，利用localStorage来缓存用户的输入数据，开发用户增添删除的功能模块,核心操作如下:
获取localStorage：
Var user_input = JSON.parse(window.localStorage.getItem(‘user_input’))
使用缓存中的数据来自定义对象，将其作为highcharts的绘制参数。
user_input.map(function(e){
Name_a.push(e.name);
Time_a_issua.push([parseFloat(e.begin),parseFloat(e.end)])
})
获取用户输入，存入缓存，刷新window进行动态的highchart传值。
存入缓存操作：
Var user_input = JSON.parse(window.localStorage.getItem(‘user_input’))
User_input = user_input == null ? [] :user_input ;//考虑第一次无缓存情况
Var add_info = {
“name”:name_info.value,
“begin”: begin_info.value…..
}
User_input.push(add_info)
If(confirm(“add into localStorage?”)){
Var stringify_info = JSON.stringify(user_input);
localStorage.setItem (“user_input” ,stringify_info);
Window.location.reload();// refresh
}
代码如下
window.onload=function () {
var user_input=JSON.parse(window.localStorage.getItem(‘user_input’));
var name_a = [];
var time_a_issue = [];
if(user_input) {
document.getElementById(‘container’).style.height += user_input.length*40;
user_input.map(function (e) {
name_a.push(e.name)
time_a_issue.push([parseFloat(e.begin), parseFloat(e.end)])})}
var chart = Highcharts.chart(‘container’, {
chart: {
type: 'columnrange', // columnrange 依赖 highcharts-more.js
inverted: true
},
title: {
text: '建筑信息'
},
subtitle: {
text: '建筑编年史'
},
xAxis: {
categories:name_a
},
yAxis: {
title: {
text: '年代 ( year )'
}
},
tooltip: {
valueSuffix: '年'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: '年代',
data:time_a_issue
}]
});
var name_info = document.getElementById(‘name_add’);
var begin_info = document.getElementById(‘name_begin’);
var end_info = document.getElementById(‘name_end’);
var dele_info = document.getElementById(‘name_del’);
document.getElementById(‘add_item’).onclick=function () {
if (name_info.value == ‘’) {
alert(‘请输入建筑名’);
return false;}
if (begin_info.value == ‘’) {
alert(‘请输入开始时间’);
return false;}
if (end_info.value == ‘’) {
alert(‘请输入结束时间’);
return false;}
/(^[-]{0,1}\d{1,2}(.\d+){0,1}$)|(^[-]{0,1}100(.0+){0,1}$)/
if(!/^[-]{0,1}\d+$/.test(begin_info.value)){
alert(‘请输入正确时间格式’);
return false;}
if(!/^[-]{0,1}\d+$/.test(end_info.value)){
alert(‘请输入正确时间格式’);
return false;}
var user_input=JSON.parse(window.localStorage.getItem(‘user_input’));
user_input = user_input == null ? [] : user_input;//获取初始的缓存值
var add_data= {“name”:name_info.value,”begin”:begin_info.value,”end”:end_info.value};//要存储的json对象
user_input.push(add_data)
if(confirm(“是否添加此建筑信息？”)) {
var user_input_st = JSON.stringify(user_input);//数据存储：将json对象转化成字符串
localStorage.setItem(“user_input”, user_input_st);//把选择的数据存储在localstorage中
console.log(JSON.parse(window.localStorage.getItem(‘user_input’)))
window.location.reload();}
document.getElementById(‘name_add’).value =’’;
document.getElementById(‘name_begin’).value =’’;
document.getElementById(‘name_end’).value =’’;}
document.getElementById(‘de_item’).onclick=function () {
var user_input=JSON.parse(window.localStorage.getItem(‘user_input’));//获取初始的缓存值
user_input = user_input == null ? [] : user_input;
if (dele_info.value == ‘’) {
alert(‘请输入删除建筑名’);
return false;}
user_input.map(function (e,index) {
if(dele_info.value.indexOf(e.name)!=-1){
if(confirm(“是否删除此建筑信息？”)) {
user_input.splice(index,1)
console.log(user_input,index)
var user_input_st = JSON.stringify(user_input);//数据存储：将json对象转化成字符串
localStorage.setItem(“user_input”, user_input_st);//把选择的数据存储在localstorage中
window.location.reload();}}})
document.getElementById(‘name_del’).value = ‘’;}
document.getElementById(‘show_item’).onclick=function () {
var user_input=JSON.parse(window.localStorage.getItem(‘user_input’));
var info =[]
user_input.map(function (e) {
info.push(e.name,parseFloat(e.begin),parseFloat(e.end))})
document.getElementById(‘name_show’).value = info
//一键删除所有数据：—当出现无法删除的数据时—使用
// window.localStorage.removeItem(‘user_input’)
}}