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，您可以专注于很好的清晰示例，而不必担心旧的浏览器。以下是该网站的引用，以显示一些示例：

// Store＆＃39; marcus＆＃39;用户名＆＃39;
  store.set（＆＃39;用户名＆＃39;，＆＃39; marcus＆＃39;）

//获取用户名＆＃39;
  store.get（＆＃39;用户名＆＃39）

//删除＆＃39;用户名＆＃39;
  store.remove（＆＃39;用户名＆＃39）

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



})();

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

2 个答案: