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

Question

I thought I might try to use local storage for a way to save a session state but the api is a little confusing to me.

I have a search results view that can have two toggled states to return the results. They can be returned in a grid view, or a list view. The user can select the preferred view by clicking on the icon. Once the user clicks on one of the icons, I would like to store that as a state in the local storage so when user comes back they don't have to click again.

html

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

Local storage code

function saveViewState() {
    if (!supportsLocalStorage()) {
         return false;
     }
    localStorage["grid.view.state"] = gViewState;

    //Not sure where to go from here
    return true;
}

Answer 1

Take a look at store.js then you don't need to worry too much about the API and you can focus on the nice clear examples and not need to worry about older browsers. Here's a quote from the site to show some examples:

// Store 'marcus' at 'username'
store.set('username', 'marcus')

// Get 'username'
store.get('username')

// Remove 'username'
store.remove('username')

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



})();