關於localStorage的實際應用
阿新 • • 發佈：2018-01-31
blog 分享圖片 商品 aos body lan rap ast session
在客戶端存儲數據
HTML5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
HTML5 使用 JavaScript 來存儲和訪問數據。
1.html代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>搜索中心</title>
<link rel="stylesheet" href="assets/mui/css/mui.min.css">
<link rel="stylesheet" href="assets/fa/css/font-awesome.min.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<div class="lt_container">
<!--頂部-->
<header class="lt_topBar">
<a href="javascript:history.back();" class="mui-icon mui-icon-back left"></a>
搜索中心
2.js代碼
$(function () { $(‘.lt_search input‘).val(‘‘); /*1. 默認渲染當前歷史記錄*/ var storageKey = ‘leTaoSearchHistoryList‘; /*1.1 需要約定當前網站存歷史記錄的KEY和數據類型 leTaoSearchHistoryList = ‘["電腦","手機"]‘*/ var jsonString = localStorage.getItem(storageKey) || ‘[]‘; var historyList = JSON.parse(jsonString); $(‘.lt_history‘).html(template(‘list‘, historyList)); //$(‘.lt_history‘).html(template(‘list‘, {list:historyList,encodeURIComponent:encodeURIComponent})); /*2. 點擊搜索記錄新的搜索歷史 跳轉去搜索列表頁*/ /*2.1 添加之後 追加在最前面*/ /*2.2 如果遇見相同的關鍵字 刪除之前的 追加在最前面*/ /*2.3 當記錄的條數超過10條 刪除之前的後面的 追加在最前面*/ $(‘.lt_search a‘).on(‘tap‘, function () { //去除輸入的內容 去了兩端空格 var key = $.trim($(‘.lt_search input‘).val()); // 判斷是否輸入 if (!key) { mui.toast(‘請輸入關鍵字‘); return false; } // 有關鍵字 /*刪除相同的*/ $.each(historyList, function (i, item) { if (item == key) { historyList.splice(i, 1); /*中斷循環*/ return false; } }); /*加載最後*/ historyList.push(key); /*超過10條刪掉*/ if (historyList.length > 10) { historyList.splice(0, historyList.length - 10); } /*存起來*/ localStorage.setItem(storageKey, JSON.stringify(historyList)); /*渲染 會跳走 沒有必要*/ //$(‘.lt_history‘).html(template(‘list‘, historyList)); /*跳轉 傳數據轉成URL編碼*/ location.href = ‘/mobile/searchList.html?key=‘+encodeURIComponent(key); }) /*3. 點擊刪除 刪除當前的歷史記錄*/ $(‘.lt_history‘).on(‘tap‘, ‘li span‘, function () { var index = $(this).data(‘index‘); console.log(index); historyList.splice(index, 1); /*存起來*/ localStorage.setItem(storageKey, JSON.stringify(historyList)); /*渲染 會跳走 沒有必要*/ $(‘.lt_history‘).html(template(‘list‘, historyList)); }).on(‘tap‘,‘.clear‘,function () { /*4. 點擊清空 清空所有的歷史記錄*/ historyList = []; localStorage.setItem(storageKey, ‘[]‘); /*渲染 會跳走 沒有必要*/ $(‘.lt_history‘).html(template(‘list‘, historyList)); }).on(‘tap‘,‘li a‘,function () { var key = $(this).data(‘key‘); /*跳轉 傳數據轉成URL編碼*/ location.href = ‘/mobile/searchList.html?key=‘+encodeURIComponent(key); }); });
關於localStorage的實際應用