(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>