jquery ui 标签不再支持cookie？怎么办？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14313270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui tabs no longer supporting cookie? now what?
提问by PaulHanak
I apologize for this being an open ended question, but I am at a loss.
对于这是一个开放式问题，我深表歉意，但我不知所措。
Since version 1.9 of the jquery UI, they depreciated using the cookieoption in order to save the active state of tabs across multiple pages. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option
从 jquery UI 的 1.9 版开始，他们使用该cookie选项进行了折旧，以保存跨多个页面的选项卡的活动状态。http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option
I haven't seen ANY other documentation out there on how to accomplish this now! So I am left scratching my head.
我现在还没有看到任何其他有关如何完成此操作的文档！所以我只能挠头了。
My best guess would be to use some sort of eventto create a cookie, then load the cookie? Or is there some OTHER way to save the active state of the tabs across multiple pages and by user preference?
我最好的猜测是使用某种方式event来创建一个 cookie，然后加载 cookie？或者是否有其他方法可以跨多个页面并根据用户偏好保存选项卡的活动状态？
回答by journeyer
Had the same issue bite me today. Here is what seems to work:
今天有同样的问题咬我。这是似乎有效的方法：
- Use jquery.cookie plugin (https://github.com/carhartl/jquery-cookie) (This step is not necessary, but it makes the life easier dealing with cookies)
Use the following code fragment:
$( ".selector" ).tabs({ active : $.cookie('activetab'), activate : function( event, ui ){ $.cookie( 'activetab', ui.newTab.index(),{ expires : 10 }); } });
- 使用 jquery.cookie 插件（https://github.com/carhartl/jquery-cookie）（这一步不是必须的，但它使处理 cookie 变得更容易）
使用以下代码片段：
$( ".selector" ).tabs({ active : $.cookie('activetab'), activate : function( event, ui ){ $.cookie( 'activetab', ui.newTab.index(),{ expires : 10 }); } });
This sets a cookie called "activetab" which expires after 10 days (refer to jquery.cookie documentationfor more options) to remember the currently selected tab whenever any tab is clicked. This cookie is read at the initialization time to display the last saved tab. The first time the page is visited, the tabs will be collapsed.
这会设置一个名为“activetab”的 cookie，它会在 10 天后过期（有关更多选项，请参阅jquery.cookie 文档）以在单击任何选项卡时记住当前选择的选项卡。在初始化时读取此 cookie 以显示上次保存的选项卡。第一次访问页面时，选项卡将折叠。
回答by dsgriffin
Short, layout-independent way of doing this using localStorage:
使用localStorage执行此操作的简短、独立于布局的方法：
$("#tabs").tabs({
active: localStorage.getItem("currentIdx"),
activate: function(event, ui) {
localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
}
});
A layout-specific way of doing it using custom data attributes (possibly useful if the attribute values were to be used in some way elsewhere in your script).
使用自定义数据属性执行此操作的特定于布局的方式（如果要在脚本的其他地方以某种方式使用属性值，则可能很有用）。
jQuery UI:
jQuery 用户界面：
$("#tabs").tabs({
active: localStorage.getItem("currentTabIndex"),
activate: function(event, ui) {
localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
}
});
Example HTML layout:
示例 HTML 布局：
<div id="tabs">
<div id="tabs-1" data-tab-index="0">
tab 1 stuff...
</div>
<div id="tabs-2" data-tab-index="1">
tab 2 stuff...
</div>
<div id="tabs-3" data-tab-index="2">
tab 3 stuff...
</div>
</div>
回答by atlmag
event tabsactivate and then store to sessionStorage or localStorage.
事件选项卡激活，然后存储到 sessionStorage 或 localStorage。
$(function() {
var selectedTabId = sessionStorage.getItem("selectedTab");
selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0
$("#tabs").tabs({
active: selectedTabId,
activate : function( event, ui ) {
selectedTabId = $("#tabs").tabs("option", "active");
sessionStorage.setItem("selectedTab", selectedTabId);
}
});
});
回答by Suba Levi
Simply:
简单地：
activate: function(event, ui) {
localStorage.setItem("accIndex", $(this).tabs("option", "active"))
},
active: parseInt(localStorage.getItem("accIndex"))
回答by Sureshkumar Natarajan
Using localStorage feature of HTML5 gives the solution for the problem, and is now the recommended way to do this type of thing. Cookies cause extra data to be added to every web request and response.
使用 HTML5 的 localStorage 特性提供了解决问题的方法，并且现在是执行此类事情的推荐方法。Cookie 会导致将额外数据添加到每个 Web 请求和响应中。
You'll find that localStorage is supported by browsersas archaic as IE8, and if you really really want support for IE6 and IE7, there is a shim to do that.
你会发现像 IE8 这样过时的浏览器都支持localStorage ，如果你真的想要支持 IE6 和 IE7，那么有一个shim 可以做到这一点。
HTML
HTML
<div class="mytab" id="mytab_1">
<ul>....</ul>
<div id="xx1">...</div>
...
</div>
JS
JS
currTabIndex=sessionStorage['mytab_1'];
And the tabfuntion call
和 tabfuntion 调用
$('.mytab').tabs({
active:currTabIndex,
load:function(event,ui){
sessionStorage[''+this.id]=(ui.panel.index()-1);
}
});
Hope this would be helpful.
希望这会有所帮助。
回答by RyanFishman
You can set the active tab using the active option such as
您可以使用活动选项设置活动选项卡，例如
$( ".selector" ).tabs({ active: 1 });
There are many ways to pass values to a webpage other than cookies. You can use query parameters and hidden fields for example. You would then create an onload script that would read either example using jQuery's onload example. $(function () { }).
除了 cookie，还有很多方法可以将值传递到网页。例如，您可以使用查询参数和隐藏字段。然后，您将创建一个 onload 脚本，该脚本将使用 jQuery 的 onload 示例读取任一示例。$（函数（）{}）。
To read query strings check out this page which gives you the method
要阅读查询字符串，请查看此页面，该页面为您提供了方法
function getParameterByName( name )
{
name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var regexS = "[\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
and to read a hidden field.
并读取隐藏字段。
$( ".selector" ).tabs({ active: $('#my-hidden-fiel').val() });
I agree with jquery ui's decision to remove this feature as cookies should really only be used to persist sessions in my opinion and not form fields or tabs for example.
我同意 jquery ui 删除此功能的决定，因为在我看来 cookie 应该只用于持久化会话，而不是表单字段或选项卡。
