web瀏覽器存儲的不一樣方式:

效果圖:

   

瀏覽器存儲的不一樣方式:

(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>
相關文章
相關標籤/搜索