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>