首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在javascript ajax中的select选项上设置cookies

在javascript ajax中的select选项上设置cookies
EN

Stack Overflow用户
提问于 2018-06-25 01:47:29
回答 1查看 382关注 0票数 0

我需要你的帮助来设置选择的cookie。

我只需要保存下一次加载页面时选择的值,该值将与上次选择的值相同。真的,我对javascript/ajax没有太多的经验,所以我的帖子。我希望你们能帮助我。请在下面找到我的简短代码:

要另存为cookie的值(data-url)

代码语言:javascript
复制
<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>

代码语言:javascript
复制
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); 
});
代码语言:javascript
复制
<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> 

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-25 02:16:33

您可以使用这个库:https://github.com/carhartl/jquery-cookie

然后使用像这样的东西:

代码语言:javascript
复制
$(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属性:

代码语言:javascript
复制
<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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51012495

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档