使用localStorage制作歷史搜索記錄

2023-02-22    分類： 網(wǎng)站建設(shè)

localStorag是在HTML5中，新加入的一個(gè)特性，localStorage主要是用來作為本地存儲來使用的，用來解決cookie存儲空間不足的問題，因?yàn)閏ookie中每條cookie的存儲空間為4k，但是localStorage在一般瀏覽器中支持的是5M大小，這個(gè)大小在不同的瀏覽器中會有所不同。
localStorage的優(yōu)勢是拓展了cookie的4K限制，localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地，這個(gè)相當(dāng)于一個(gè)5M大小的針對于前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但是局限性是只有在IE8以上的IE版本才支持localStorage這個(gè)屬性。目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，所以在使用時(shí)，需要把string類型轉(zhuǎn)成我們常用的JSON數(shù)組對象類型。localStorage在瀏覽器的隱私模式下是不可讀取的，localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導(dǎo)致頁面變卡，所以需要控制存儲的數(shù)據(jù)量，或者清除存儲數(shù)據(jù)。localStorage不能被爬蟲抓取到，從一定程度上保護(hù)了用戶個(gè)人隱私。

input

以下是使用展示

JS代碼
因?yàn)槲宜阉骺蚺c展示搜索結(jié)果記錄的頁面是分開的，所以我這邊是先把搜索值傳遞到后臺，然后再傳到前端。
搜索列表
然后就能得到以下的歷史搜索記錄列表
JS
根據(jù)網(wǎng)站的需求，我這邊還加上了刪除單條歷史搜索記錄，清除所有歷史搜索記錄以及根據(jù)歷史搜索記錄再查詢功能。
以下貼具體代碼：
html
前端代碼：








JS代碼
Javascript代碼：

網(wǎng)站欄目：使用localStorage制作歷史搜索記錄
本文來源：http://muchs.cn/news/238952.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、云服務(wù)器、定制開發(fā)、網(wǎng)站排名、建站公司、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)