web浏览器存储的不一样方式：

时间 2019-12-10

原文原文链接

效果图：

浏览器存储的不一样方式：

(1)生命期为只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。存放数据大小为4K左右。有个数限制（各浏览器不一样），通常不能超过20个。与服务器端通讯：每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题。javascript

(2)sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为通常为5MB,并且它仅在客户端（即浏览器）中保存，不参与和服务器的通讯。源生接口能够接受，亦可再次封装来对Object和Array有更好的支持。html

(3)localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，不然这些信息将永远存在。存放数据大小为通常为20MB,并且它仅在客户端（即浏览器）中保存，不参与和服务器的通讯。java

基本用法：jquery

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”json


localStorage.getItem("key");//获取名称为“key”的值

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();//清空localStorage中全部信息

搜索历史记录案例：数组

js中json格式转为对象或数组为 JSON.parse(); 字符串转为json为 JSOn.stringfy()浏览器

具体代码：

<body><input type="search" placeholder="输入搜索关键字"/><input type="button" value="搜索"/><div><a href="javascript:;">清空搜索记录</a></div><ul></ul><script src="jquery.min.js"></script><script>    $(function () {        /*约定：json 数组方式存储数据         * 名字为historyList*/        /*1.根据数据列表渲染页面*/        var historyJson = localStorage.getItem('historyList') || '[]';        //将获得的数据转为数组格式        var historyArr = JSON.parse(historyJson);        var render = function () {            //渲染页面            var html = '';            historyArr.forEach(function (item, index) {                html += '<li ><span>' + item + '</span><a data-index="'+index+'" href="javascript:;">删除</a></li>';            });            html = html || '<li>没有搜索记录</li>';            $('ul').html(html);        };        render();        /*2.点击搜索，更新数据列表，再渲染页面*/        $('[type="button"]').on('click',function(){            var key=$.trim($('[type="search"]').val());            if(!key){                alert('请输入搜索内容');                return false;            }            historyArr.push(key);            //在将新数组保存在本地存储中            localStorage.setItem('historyList',JSON.stringify(historyArr));            render();            $('[type="search"]').val('');        })        /*3.点击删除，删除数据中所对应的数据，渲染页面*/        $('ul').on('click','a',function(){            var index=$(this).data('index');            historyArr.splice(index,1);            //从新渲染            localStorage.setItem('historyList',JSON.stringify(historyArr));            render();        });        /*4.点击清空，清空数据列表，从新渲染渲染页面*/        $('div a').on('click',function () {            historyArr=[];            localStorage.removeItem('historyList');            render();        });    });</script></body>