Question

我希望在页面刷新后保留选定的值，使用jquery UI selectable https://jqueryui.com/selectable/

这里是jquery selectable的代码示例

<!doctype html>
 <html lang="en">
  <head>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-
ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 
  18px; 
  }
  </style>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
 $( function() {
   $( "#selectable" ).selectable();
 } );
  </script>
</head>
<body>

<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
 <li class="ui-widget-content">Item 2</li>
 <li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
 <li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>

实现这一目标的最佳方法是什么

Answer 1

只需将值存储在cookie中，并在document.load方法中引用它。

来自QuirksMode（包括转义字符）

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

然后使用此调用在函数中创建cookie：

createCookie('StoredValueName', selectedValue, 1)

Answer 2

使用Selected event并将您提供该项目的ID存储为HTML5 Storage Object

在初始页面加载时，您应检查存储项目并将所选类别提供给匹配ID

的项目

Scaffold.of(context)

使用storage object over a cookie可能更好，因为可能是客户端使用此信息。

如何在jquery UI

2 个答案: