使用HTML5本地存储保存视图状态

Save view state using HTML5 local storage

本文关键字：保存 视图状态 存储 HTML5 使用      更新时间：2023-09-26

我想我可能会尝试使用本地存储来保存会话状态，但api对我来说有点混乱。

我有一个搜索结果视图，它可以有两个切换状态来返回结果。它们可以在网格视图或列表视图中返回。用户可以通过单击图标来选择首选视图。一旦用户点击其中一个图标，我想把它作为一个状态存储在本地存储，这样当用户回来时，他们就不必再点击了。

html 

 <div class="cbp-vm-options">
   <a href="#" class="cbp-vm-grid cbp-vm-selected"></a>
   <a href="#" class="cbp-vm-list"></a>
 </div>

本地存储代码

function saveViewState() {
    if (!supportsLocalStorage()) {
         return false;
     }
    localStorage["grid.view.state"] = gViewState;
    //Not sure where to go from here
    return true;
}

看一下store.js，你就不需要太担心API了，你可以专注于漂亮的清晰的例子，而不必担心旧的浏览器。下面是摘自该网站的一段话来展示一些例子:

//在'username'下存储'marcus'
商店。集("用户名","马克斯")

//获取'username'
store.get(用户名)

//删除'username'
store.remove(用户名)

http://jsfiddle.net/5a03a5ec/1/

HTML 

<div class="cbp-vm-options">
    <a href="#" class="cbp-vm-grid" data-state="grid"></a>
    <a href="#" class="cbp-vm-list" data-state="list"></a>
</div>
<div id="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
CSS 

.cbp-vm-options a {
    opacity: 0.50;
    transition-duration: 800ms;    
    display: inline-block;
    width: 1em;
    height: 1em;
    background: black;
}
.cbp-vm-options a.cbp-vm-selected {
    opacity: 1;
}
.cbp-vm-grid {
}
.cbp-vm-list {
}
#content {
    display: flex;
    flex-flow: row wrap;
}
#content .item {
    border: 10px solid white;
    box-sizing: border-box;
    background: red;
    height: 40px;
    width: 100%;
}
#content.grid .item {
    width: 25%;
}
JavaScript 

(function() {
    var cbp_vm_options, content;

    // This function sets the localStorage variable
    function setState(event) {
        event.preventDefault();
        console.log(event);
        var new_state = event.target.dataset.state;
        if(document.querySelector('.cbp-vm-selected'))
            document.querySelector('.cbp-vm-selected').classList.remove('cbp-vm-selected');
        event.target.classList.add('cbp-vm-selected')
        console.log(new_state);
        localStorage.clear();
        localStorage.setItem('view_state', new_state);
        updateUi();
    }
    // This function updates the ui for the user depending on the value
    // of 'vew_state'. The function is called whenever the value changes.
    function updateUi(event) {
        content.classList.toggle('grid');
        var state = localStorage.getItem('view_state');
        if(state === 'grid') {
            content.classList.add('grid');
            cbp_vm_options.querySelector('.cbp-vm-grid').classList.add('cbp-vm-selected');
        } else {
            content.classList.remove('grid');            
            cbp_vm_options.querySelector('.cbp-vm-list').classList.add('cbp-vm-selected');
        }
    }

    function init() {
        cbp_vm_options = document.querySelector('.cbp-vm-options'),
        content = document.querySelector('#content');

        updateUi();
        cbp_vm_options.addEventListener('click', setState);
    }
    document.addEventListener('DOMContentLoaded', init);

})();
相关文章：