js学习笔记:使用localStorage制作记忆菜单

开始学习浏览器的本地存储,Web Storage有两种,一个是sessionStorage,另一个是localStorage,这两个是html5的规范。连IE8都支持。所以在使用的时候可以不用丝毫的犹豫。

注:有些人怀疑IE8是不是支持web storage,其实我刚开始也在怀疑,因为我在本地建立的html文件并以路径方式访问的时候,chrome下正常,IE下说找不到JScript对象,这也让我怀疑IE8并不支持localStorage,但是当我把文件放到wamp环境下的时候在此访问的时候,便可以了。

这里测试结果。点击进入尝试一下吧:DEMO测试

下面是制作过程:

第一步就是打造一个折叠菜单,这个比较容易,代码如下:

html部分:

<ul class="menu">
    <li>
        <a href="">菜单一</a>
        <ul class="submenu">
            <li>子菜单一</li>
            <li>子菜单二</li>
            <li>子菜单三</li>
            <li>子菜单四</li>
        </ul>
    </li>
    <li>
        <a href="">菜单二</a>
        <ul class="submenu">
            <li>子菜单一</li>
            <li>子菜单一</li>
            <li>子菜单一</li>
            <li>子菜单一</li>
        </ul>
    </li>
    <li>
        <a href="">菜单三</a>
        <ul class="submenu">
            <li>子菜单一</li>
            <li>子菜单二</li>
            <li>子菜单三</li>
            <li>子菜单四</li>
        </ul>
    </li>
    <li>
        <a href="">菜单四</a>
        <ul class="submenu">
            <li>子菜单一</li>
            <li>子菜单二</li>
            <li>子菜单三</li>
            <li>子菜单四</li>
        </ul>
    </li>
</ul>

css部分:

*{
    margin: 0;
    padding: 0;
}
ul.menu{
    list-style: none;
    margin: 20px 0 0 20px;
}
ul.menu>li{
    width: 150px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    background: red;
}
ul.submenu{
    list-style: none;
    background: #ccc;
    width: 150px;
    display: none;
}

js部分:

var li = document.querySelectorAll(".menu>li");
var sub = document.querySelectorAll(".submenu");
for (var i = 0; i < li.length; i++) {
    li[i].onclick = subShow(i)
};
function subShow(i){
    return function(){
        value = sub[i].style.display;
        if (value == null || value == '' || value == 'none') {
            sub[i].style.display = "block";
        }else{
            sub[i].style.display = "none";
        }
    }
}

下面是重要的部分,当我们点击菜单的时候,把这个菜单的index值存入localStorage,当我们再次点击的时候,就删除index值:

//省略上面代码
if (value == null || value == '' || value == 'none') {
    sub[i].style.display = "block";
    localStorage.setItem(i,"block");
}else{
    sub[i].style.display = "none";
    localStorage.removeItem(i);
}
//省略下面代码

然后,当页面初始化的时候,我们检测localStorage里面的值,如果存在index,便设置其css的display样式:

for(var key in localStorage ){
    sub[key].style.display = "block";
}

这样,一个很简单的记忆菜单便完成,说很简单是因为我们存入localStorage的值比较简单,因为在实际中,可能存入localStorage的值很多,而其他值并不是我们的菜单的index,无法设置其style样式,结果程序便会报错,所以,为了让程序健壮,我们应该给每个菜单设置专有的id值:

localStorage.setItem("memoryMenu"+i,"block");

然后取值的时候,也坐下判断:

for(var key in localStorage ){
    if (key.indexOf("memoryMenu")>=0) {
        key = parseInt(key.slice(10));
        sub[key].style.display = "block";
    };
}

总结

localStorage是HTML5规范的一项重要内容,本地存储可以缓解服务器压力,并且离线应用中也发挥着很重要的作用。

webstorage的使用方式大多相似:

localStorage.setItem(name,value);
localStorage.removeItem(name,value);
localStorage.clear(name,value);

以及支持通过属性的方式去设置和引用

localStorage.name
或者
localStorage[name]

1 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注