先給大家說下什么是localstorage
前幾天在老項(xiàng)目中發(fā)現(xiàn)有對(duì)cookie的操作覺得很奇怪，咨詢下來是要緩存一些信息，以避免在URL上面?zhèn)鬟f參數(shù)，但沒有考慮過cookie會(huì)帶來什么問題：
① cookie大小限制在4k左右，不適合存業(yè)務(wù)數(shù)據(jù)
② cookie每次隨HTTP事務(wù)一起發(fā)送，浪費(fèi)帶寬
我們是做移動(dòng)項(xiàng)目的，所以這里真實(shí)適合使用的技術(shù)是localstorage，localstorage可以說是對(duì)cookie的優(yōu)化，使用它可以方便在客戶端存儲(chǔ)數(shù)據(jù)，并且不會(huì)隨著HTTP傳輸，但也不是沒有問題：
① localstorage大小限制在500萬字符左右，各個(gè)瀏覽器不一致
② localstorage在隱私模式下不可讀取
③ localstorage本質(zhì)是在讀寫文件，數(shù)據(jù)多的話會(huì)比較卡（firefox會(huì)一次性將數(shù)據(jù)導(dǎo)入內(nèi)存，想想就覺得嚇人啊）
④ localstorage不能被爬蟲爬取，不要用它完全取代URL傳參
瑕不掩瑜，以上問題皆可避免，所以我們的關(guān)注點(diǎn)應(yīng)該放在如何使用localstorage上，并且是如何正確使用。
摘要：
H5本地存儲(chǔ)
在以前，我們想要存儲(chǔ)一些數(shù)據(jù)，并且只是在前端使用，服務(wù)端并不會(huì)使用，我們只能存在cookie里，但是cookie會(huì)跟隨請(qǐng)求頭在客戶端和服務(wù)端之間來回傳遞，而且cookie還有一些缺點(diǎn)，H5提供了webStorage的API用來做客戶端的數(shù)據(jù)存儲(chǔ)
cookie與webStorage的區(qū)別
webStorage包含的存儲(chǔ)方式
localStorage和sessionStorage 的使用方法（API）
增/改： localStorage.setItem(key,value)/ localStorage.a = 1
查： length；key方法（index）得到對(duì)應(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>
新聞熱點(diǎn)
疑難解答
圖片精選
