在javascript ajax中的select选项上设置cookies
在javascript ajax中的select选项上设置cookies
提问于 2018-06-25 01:47:29
我需要你的帮助来设置选择的cookie。
我只需要保存下一次加载页面时选择的值，该值将与上次选择的值相同。真的，我对javascript/ajax没有太多的经验，所以我的帖子。我希望你们能帮助我。请在下面找到我的简短代码：
要另存为cookie的值(data-url)
<select id="timePeriod">
<option data-url="https://api.myjson.com/bins/12at1e">Minute</option>
<option data-url="https://api.myjson.com/bins/16cjya">Hour</option>
<option data-url="https://api.myjson.com/bins/1fecci">Day</option>
<option data-url="https://api.myjson.com/bins/1fecci">Forever</option>
</select>
function drawHighchart(timeFramUrl) {
$.ajax({url: timeFramUrl, success: function(data){
var currentValue = (data[data.length - 1][1]);
Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
load: function() {
var series = this.series[0];
var chart = this;
var yAxis = chart.yAxis[0],
plotLine,
d,
newY;
yAxis.addPlotLine({
value: currentValue,
color: '#ff5959',
width: 2,
zIndex: 5,
id: 'plot-line-1',
label: {
text: currentValue,
style: {
color: '#ff5959',
fontWeight: 'bold'
}
}
});
reload = setInterval(function() {
$.getJSON(timeFramUrl + '?v=' + Math.random(), function(recData) {
var currentValue = (recData[recData.length - 1][1]);
var currenttime = (recData[recData.length - 1][0]);
series.setData(recData);
var x = currenttime,
y = currentValue;
series.addPoint([x, y], true, true);
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotlabel = yAxis.plotLinesAndBands[0].label;
plotlabel.animate({
translateY: newY,
text: Highcharts.numberFormat(y, 2)
}, {
duration: 400,
step: function() {
$(this.element).html(y);
},
complete: function() { }
}),
plotLine.animate({
translateY: newY
}, 400);
});
}, 5000);
}
}
},
title: { text: ''},
exporting: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime'},
yAxis: { opposite: true,
labels: {
align: 'left',
},
gridLineWidth: 0,
title: {
text: 'Exchange rate'
},
},
plotOptions: {
areaspline: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Exchange BTC to EUR',
data: data,
type: 'areaspline',
threshold: null,
animation: true,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: { x1: 5, y1: 0, x2: 0, y2: 0
},
stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ]
}
}]
});
}});
}
// To save as cookie
$(document).ready(function() {
var srcURL = $(':selected', '#timePeriod').data('url');
drawHighchart(srcURL);
$('#timePeriod').change(function(){
var srcURL = $(':selected', this).data('url');
drawHighchart(srcURL);
});
});
$('#timePeriod').change(function(){
clearInterval(reload);
});<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- To save as cookies -->
<select id="timePeriod">
<option data-url="https://api.myjson.com/bins/12at1e">Minute</option>
<option data-url="https://api.myjson.com/bins/16cjya">Hour</option>
<option data-url="https://api.myjson.com/bins/1fecci">Day</option>
<option data-url="https://api.myjson.com/bins/1fecci">Forever</option>
</select>
<div id="container" style="height: 400px; width: 100%"></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-25 02:16:33
您可以使用这个库：https://github.com/carhartl/jquery-cookie
然后使用像这样的东西：
$(document).ready(function () {
$('#timePeriod').on('change', function() {
$.cookie('myCookie', $('#timePeriod').val());
});
var cookieValue = $.cookie('myCookie');
if (typeof cookieValue !== "undefined") {
$('#timePeriod').val(cookieValue);
}
});实际上，我会使用options的value属性来存储url，而不是data-url属性：
<select id="timePeriod">
<option value="https://api.myjson.com/bins/12at1e">Minute</option>
<option value="https://api.myjson.com/bins/16cjya">Hour</option>
<option value="https://api.myjson.com/bins/1fecci">Day</option>
<option value="https://api.myjson.com/bins/1fecci">Forever</option>
</select>除非有任何原因迫使您使用data-url
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51012495
复制相关文章
相似问题
腾讯云开发者
