使用瀏覽器後退按鈕時記住摺疊/展開狀態部分

Question

我在我的網站上有幾個部分。我允許觀看者分別展開/摺疊節。這些部分用javascript（jquery/zepto）擴展。 （每個部分都有一個按鈕來展開或摺疊它。）

如果查看器離開頁面查看鏈接的文檔，然後使用瀏覽器的後退按鈕返回，則所有部分都會摺疊。

我可以將節的狀態存儲在cookie中。但我不認爲當瀏覽器通過後退按鈕回到頁面時，cookie會被讀取...... 有沒有辦法記住這些部分的狀態（展開/摺疊）？

Answer 1

考慮使用HTML5本地存儲 - 目前尚未支持所有瀏覽器，但實現起來非常簡單。

例如：

var foo = localStorage.getItem("foo"); 
// ... 
localStorage.setItem("content", item); 

在你的情況下，只需添加一行，以更新的localStorage上市每當它展開或摺疊說「部分」：

// Inside your function: 
var state = // whether the 'section' is expanded or collapsed 
localStorage.setItem(state, $(this).id()); 

而當頁面加載

$(section).each(function() { // 'section' should target all collapsible elements 
    var expanded = localStorage.getItem($(this).id()); // be careful here - make sure it's parsed in the correct format 
    if (expanded == 1) { 
     $(this).expand(); // your expand function 
    } else { 
     $(this).collapse(); // your collapse function 
    } 
}); 

Read up about it here