localStorage Settings

by Kaiyuan Xie

HTML

<ul class="settings">
    <li id="theSetting1">SETTING 1</li>
    <li id="theSetting2">SETTING 2</li>
    <li id="theSetting3">SETTING 3</li>
</ul>

CSS

.settings, .settings li{
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 12px;
	font-family: "Helvetica Neue", Ubuntu, "WenQuanYi Micro Hei", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	line-height: 1.8em;
	text-shadow: 0 0 1px rgba(255,255,255,0.1);
	background: #fff;
}
.settings li {
    display: inline-block;
    width: 80px;
    height: 24px;
    line-height: 24px;
    background-color: #98de24;
    padding: 2px 7px;
    margin: 5px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
    box-shadow: 0 0 1 rgba(255,255,255,0.3);
}
.settings li.off {
    background-color: #f64f35;
}

JavaScript

jQuery(document).ready(function() {
    
    function settingsClick(thisID) {
        var theSettingNo = localStorage.getItem(thisID);	//获取指定 key 的 value
        

        /*
        *根据上面获取的 value 判断并且运行代码
        */
        if(theSettingNo==="1") {
            $('#'+thisID).addClass('off');
        } else {
            $('#'+thisID).removeClass('off');
        }
    }
    
    //	状态变更按钮
    $('.settings>li').click(function () {
    	var thisID = $(this).attr("id");	//获取当前点击的 li 中 ID
        var thisSetting = localStorage.getItem(thisID);	//获取对应的 localStorage

        //	根据获取的值变更
        if (thisSetting==="1") {
        	localStorage.setItem(thisID, "0")
            // $("#"+thisID).addClass('off');
        } else{
        	localStorage.setItem(thisID, "1")
            // $("#"+thisID).removeClass('off');
        };
        settingsClick(thisID);
    });
    
    function loadpage() {
        /*
        *	这个是页面载入时候的状态
        */
        settingsClick("theSetting1");
        settingsClick("theSetting2");
        settingsClick("theSetting3");
    }

    loadpage();	//页面载入运行上面写好的。
});