有关localStorage的一个小demo

最新推荐文章于 2024-07-22 16:07:49 发布

磊磊磊磊磊子啊

最新推荐文章于 2024-07-22 16:07:49 发布

阅读量1.4k

点赞数

分类专栏： HTML5 文章标签：存储 web存储动态添加数据

本文链接：https://blog.csdn.net/zsl_955200/article/details/54093418

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

IE8以及以上的主流浏览器都支持，但是在使用之前也要先判断浏览器是否支持，它和sessionStorage基本上是一样的，它俩的区别就在于存储的时间不同，前者可永久存储，后者是当窗口一关闭就不复存在，我比较倾向于前者。
这个小demo是动态的将文本框中的值加到表格中，并提供删除功能，我用的是文本框的oninput事件，为了支持IE又用了onpropertychange事件，为什么不直接用change事件，因为这个事件在文本框失去焦点后才会触发，给不了我想要的结果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" value="" id="inp" onpropertychange="show()" oninput="show()"/>
        <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <table border=1 style="width:100%" id="table1" cellpadding="3" cellspacing="0">
            <tr>
                <th>sku</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>sku</td>
                <td>1</td>
                <td><span>删除</span></td>
            </tr>
        </table>
        <script type="text/javascript">
        //验证该浏览器是否支持localStorage
        if(window.localStorage){
            var store=window.localStorage;
        }else{
            alert('你的浏览器不支持localStorage!');
        }

        //用事件委托绑定事件，否则动态生成的标签可能没有该事件
        $('table').on('click','span',function(){
            var val=$(this).parent().siblings('td:first').text();
            //删除指定的内容
            store.removeItem(val);
            //删除全部内容
            //store.clear();
            $(this).parents('tr').remove();
        })

        //初始化，将localStorage中的数据显示到相应表格
        function init(){
            for(var i=0;i<store.length;i++){
                //通过key方法遍历键值信息
                var sku=store.key(i);
                var num=store.getItem(sku);
                $("#table1").append("<tr id='"+sku+"' ><td>"+sku+"</td><td id='"+sku+"_num' >"+num+"</td><td><span>删除</span></td></tr>");
            }
        }
        init();

        function show(){
            var val=document.getElementById('inp').value;
            //将input中的值作为键，值为input中的值出现的次数
            var num = store.getItem(val);
            if(num){
                num ++;
                store.setItem(val,num);
            }else{
                num =1;
                store.setItem(val,num);
            }
            if($("#"+val+"_num").text()){
                $("#"+val+"_num").text(num);
            }else{
                $("#table1").append("<tr id='"+val+"' ><td>"+val+"</td><td id='"+val+"_num' >"+num+"</td><td><span>删除</span></td></tr>");
            }

            var arr3=[];//以键值对的形式存到数组中
            for(var i=0;i<store.length;i++){
                var sku=store.key(i);
                var num=store.getItem(sku);
                arr3.push({sku:num,key:sku});
            }
        }
        </script>
    </body>
</html>