如何保持字段选择值的jQuery UI页面重新加载后

我想继续刷新页面后选择的值，我使用jQuery UI的选择https://jqueryui.com/selectable/如何保持字段选择值的jQuery UI页面重新加载后

这里是jQuery的选择的代码示例

<!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>

什么是最好的方法来实现这个

来源

2017-09-10 Iamgisnet

只需将值存储在cookie中并将其引用到document.load方法中即可。

从怪异模式（包括转义字符）

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)

来源

2017-09-10 10:54:44 Arkay

使用Selected event和存储ID你给项目作为HTML5 Storage Object

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

$(storageId ,'#selectable').addClass('ui-selected');

它可能会更好使用storage object over a cookie，因为它可能是客户端谁使用这些信息。

来源

2017-09-10 11:14:05 Zumo

如何保持字段选择值的jQuery UI页面重新加载后

回答

相关问题