有关localStorage的一个小demo

来源：互联网发布：淘宝亚瑟士全是假的编辑：程序博客网时间：2024/06/06 03:54

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>

0 0