测试本地储存1000条数据以上，页面是否会卡顿

<div>
        <div class="header">
            <input type="text" id="num" />
            <input type="button" id="submit" value="提交" />
        </div>
        <div class="content">
            <table width="400" border="0" cellspacing="0" cellpadding="0" id="listTable">
                <thead>
                    <tr>
                        <th>条码</th>
                        <th>价格</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
    </div>

.header {
            display: flex;
        }

        #submit {
            margin-left: 40px;
        }

        .content {
            margin-top: 40px;
        }

        .table {
            border: 1px solid #ccc;
        }

        .content table {
            border: 1px solid #ccc;
            border-left: none;
        }

        .content table td {
            text-align: center;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }

        .content table th {
            border-left: 1px solid #ccc;
        }

window.onload = function () {
        var submits = document.getElementById("submit");
        //获取焦点
        document.getElementById('num').focus();
        document.getElementById('num').select();
        submits.onclick = function () {
            var num = document.getElementById("num").value;
            for(var i = 0; i<100;i++){
                add(num)
            }
        }
        function add(num){
            var tr =document.createElement("tr");
            var td1 =document.createElement("td");
            var td2 =document.createElement("td");
            var td3 =document.createElement("td");
            var table=document.getElementById('listTable');
            var rows = table.rows.length;
            td1.innerHTML=num;
            td2.innerHTML=num;
            td3.innerHTML=rows;
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            table.appendChild(tr);
            window.localStorage.setItem('num',JSON.stringify(num))
            console.log( JSON.parse(window.localStorage.getItem('num')),'hsdj')
        }
    }

代码如上

localStorage使用总结

一、什么是localStorage、sessionStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

 

二、localStorage的优势与局限

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage的删除

1、将localStorage的所有内容清除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);

2、 将localStorage中的某个键值对删除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

 一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);