基于bootstrap寫的一點localStorage本地儲存
先給大家說下什么是localstorage
前幾天在老項目中發(fā)現(xiàn)有對cookie的操作覺得很奇怪，咨詢下來是要緩存一些信息，以避免在URL上面?zhèn)鬟f參數(shù)，但沒有考慮過cookie會帶來什么問題：
① cookie大小限制在4k左右，不適合存業(yè)務(wù)數(shù)據(jù)
② cookie每次隨HTTP事務(wù)一起發(fā)送，浪費帶寬
我們是做移動項目的，所以這里真實適合使用的技術(shù)是localstorage，localstorage可以說是對cookie的優(yōu)化，使用它可以方便在客戶端存儲數(shù)據(jù)，并且不會隨著HTTP傳輸，但也不是沒有問題：
① localstorage大小限制在500萬字符左右，各個瀏覽器不一致
② localstorage在隱私模式下不可讀取
③ localstorage本質(zhì)是在讀寫文件，數(shù)據(jù)多的話會比較卡（firefox會一次性將數(shù)據(jù)導入內(nèi)存，想想就覺得嚇人?。?br />
④ 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 ：有效期是永遠，永久保存；除非手動刪除
- 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>
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>
總結(jié)
以上所述是小編給大家介紹的基于bootstrap寫的一點localStorage本地儲存，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
下載站常用的點擊下載地址提示設(shè)hao123為首頁的js代碼
最近很多下載站下載文件的時候都提示設(shè)置hao123為首頁，這里我們來分享下具體的實現(xiàn)方法，需要的朋友可以參考下2013-10-10
讓ie6也支持websocket采用flash封裝實現(xiàn)
ie9都不支持websocket,何況ie6,往往這些不可思議的事情卻意想不到的發(fā)生了;websocket能開發(fā)那么酷的功能,怎么能讓ie攔住我們的腳步,用falsh封裝吧，感興趣的你可不要錯過了哈2013-02-02
外部JavaScript文件塊下載和傷害你的頁面的性能，但有一個簡單的方法來解決此問題：并行使用動態(tài)腳本標記和加載腳本，提高頁面加載速度和用戶體驗。2010-12-12
將html頁面保存成圖片,圖片寫入pdf的實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄獙tml頁面保存成圖片,圖片寫入pdf的實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
