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

Question

我以为我可能会尝试使用本地存储来保存会话状态，但是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;
}

Answer 1

看一下store.js，然后您就不必担心API了，您可以专注于漂亮的清晰示例，而无需担心较旧的浏览器。 这是该网站的引文，显示了一些示例：

//将'marcus'存储在'username'
store.set（'用户名'，'马库斯'）

//获取“用户名”
store.get（ '用户名'）

//删除“用户名”
store.remove（ '用户名'）

Answer 2

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);



})();