基于bootstrap寫的一點localStorage本地儲存-創(chuàng)新互聯(lián)

先給大家說下什么是localstorage

成都創(chuàng)新互聯(lián)公司是一家企業(yè)級云計算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營經(jīng)驗。主營GPU顯卡服務(wù)器，站群服務(wù)器，達(dá)州主機(jī)托管，海外高防服務(wù)器，大帶寬服務(wù)器，動態(tài)撥號VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

前幾天在老項目中發(fā)現(xiàn)有對cookie的操作覺得很奇怪，咨詢下來是要緩存一些信息，以避免在URL上面?zhèn)鬟f參數(shù)，但沒有考慮過cookie會帶來什么問題：

① cookie大小限制在4k左右，不適合存業(yè)務(wù)數(shù)據(jù)
② cookie每次隨HTTP事務(wù)一起發(fā)送，浪費(fèi)帶寬

我們是做移動項目的，所以這里真實適合使用的技術(shù)是localstorage，localstorage可以說是對cookie的優(yōu)化，使用它可以方便在客戶端存儲數(shù)據(jù)，并且不會隨著HTTP傳輸，但也不是沒有問題：

① localstorage大小限制在500萬字符左右，各個瀏覽器不一致
② localstorage在隱私模式下不可讀取
③ localstorage本質(zhì)是在讀寫文件，數(shù)據(jù)多的話會比較卡（firefox會一次性將數(shù)據(jù)導(dǎo)入內(nèi)存，想想就覺得嚇人啊）
④ localstorage不能被爬蟲爬取，不要用它完全取代URL傳參
瑕不掩瑜，以上問題皆可避免，所以我們的關(guān)注點應(yīng)該放在如何使用localstorage上，并且是如何正確使用。

摘要：

H5本地存儲

在以前，我們想要存儲一些數(shù)據(jù)，并且只是在前端使用，服務(wù)端并不會使用，我們只能存在cookie里，但是cookie會跟隨請求頭在客戶端和服務(wù)端之間來回傳遞，而且cookie還有一些缺點，H5提供了webStorage的API用來做客戶端的數(shù)據(jù)存儲

cookie與webStorage的區(qū)別

cookie有大小的限制，只能存儲4kb，webStorage可以存儲5Mb，cookie還有條數(shù)的限制
cookie會跟隨請求頭在客戶端和服務(wù)端之間傳遞，會影響帶寬。
cookie需要設(shè)置有效期，localStorage是永久保存，sessionStorage是會話保存，
cookie可以設(shè)置作用path
cookie的操作較為困難，webStorage的API較為容易
cookie的兼容性比webStorage兼容性好

webStorage包含的存儲方式

localStorage ：有效期是永遠(yuǎn)，永久保存；除非手動刪除
sessionStorage：有效期是一次會話時間
globalStorage、indexedDB、webSQL因為兼容性、實用性較差，所以，不使用

localStorage和sessionStorage 的使用方法（API）

localStorage和sessionStorage的使用方法一樣
增刪改查

增/改： localStorage.setItem(key,value)/ localStorage.a = 1

查： length；key方法（index）得到對應(yīng)的key getItem(key)/localStorage.a

刪： removeItem（key）

清空: clear()

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" >
</head>
<style>
 .panel-body input.form-control{
 width: 200px;
 }
</style>
<body>
 <div class="container">
 <div class="panel panel-primary insert">
 <div class="panel-heading">

 增加

 </div>
 <div class="panel-body">
 <label for="">key:</label>
 <input type="text" id="key" class="form-control">
 <label for="">value:</label>
 <input type="text" id="value" class="form-control">
 <button onclick="save()">save</button>
 </div>
 </div>
 <div class="panel panel-primary select">
 <div class="panel-heading">
 key-value-list:
 </div>
 <div class="panel-body">
 <button onclick="select()" class="btn btn-success">select</button>
 <button onclick="abc()" class="btn btn-warning">clear</button>
 <hr>
 <ul class="list-group">
 </ul>
 </div>
 </div>
 </div>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script>
 function save(){
 var key = $(".insert #key").val()
 var value = $(".insert #value").val()
 localStorage.setItem(key,value)
 //select()
 }
 function select(){
 let str = ''
 for(var i = 0;i < localStorage.length;i ++){
 var key = localStorage.key(i)
 var value = localStorage.getItem(key)
 str +=`
 <li class="list-group-item clearfix">
 key: <span class="label label-primary key">${key}</span> &nbsp;&nbsp;&nbsp;
 value: <span class="label label-primary value">${value}</span>
 <button data-key='${key}' class="btn btn-danger delete pull-right">delete</button>
 </li>
 `
 }
 $(".select ul").html(str)
 }
 function abc(){
 localStorage.clear()
 $(".select ul").html("")
 }
 $(".select ul").delegate(".delete",'click',function () {
 console.log(1)
 var key = $(this).data("key")
 localStorage.removeItem(key)
 $(this).parent().remove()
 })
 </script>
</body>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：基于bootstrap寫的一點localStorage本地儲存-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://bm7419.com/article34/gihpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、移動網(wǎng)站建設(shè)、網(wǎng)站營銷、App設(shè)計、搜索引擎優(yōu)化、營銷型網(wǎng)站建設(shè)

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

猜你還喜歡下面的內(nèi)容