HTML5的localStorage緩存詳解

什么是localStorage

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,承德縣企業(yè)網(wǎng)站建設,承德縣品牌網(wǎng)站建設,網(wǎng)站定制,承德縣網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,承德縣網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

HTML5加入了localStorage，作為客戶本地存儲文件，之前用cookie，但是每條cookie空間為4K?localStorage?支持5M
一張圖了解下客戶端瀏覽器的存儲發(fā)展史

瀏覽器支持情況

Feature Chrome Firefox Internet Explorer Opera Safari Android Opera Mobile Safari Mobile
localStorage 4 3.5 8 10.50 4 2.1 11 iOS 3.2
sessionStorage 5 2 8 10.50 4 2.1 11 iOS 3.2

特點

  1. 字符串存儲：localStorage存儲的值均為String 字符串
    把對象轉(zhuǎn)換成json字符串，就能讓存儲對象了；把圖片轉(zhuǎn)換成DataUrl（base64），就可以存儲圖片了。月小升試過音樂也可以轉(zhuǎn)成字符串存。
  2. 無法隱私：localStorage在瀏覽器的隱私模式下不可用
  3. 爬蟲情況：無法讀取localStorage
  4. 無法跨域： a.com 的localStorage 無法被b.com 直接讀取
  5. 過期時間：一直有效，客戶不主動清空，那么數(shù)據(jù)一直在

判斷l(xiāng)ocalStorage

if(!window.localStorage){
alert("瀏覽器支持localstorage");
return false;
}else{
//開始浪
}

HTML5 localStorage 增刪改遍歷

  1. HTML5 寫入localStorage
    標準寫法

var storage=window.localStorage;
storage.setItem("name","tom");
官方不太推薦，但是支持的寫法

storage["name"]="tom";
storage.name="tom";

  1. HTML5 讀取localStorage
    標準寫法

var a1=storage.getItem("name");
官方不太推薦，但是支持的寫法

var a2=storage.name;
?
var a3=storage["name"];

  1. HTML5 更新localStorage

更新？html5的localStorage 存的時候是單鍵值對 key-value模式，重新寫一遍name就是更新了

storage.setItem("name","Jack");

  1. HTML5 刪除localStorage

storage.removeItem("name");

  1. HTML5 遍歷localStorage 所有key 和 value數(shù)據(jù)

var storage=window.localStorage;
storage.setItem("name1","tom");
storage.setItem("name2","jack");
storage.setItem("name3","Lucy");
?
for(var i=0;i<storage.length;i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + " - " + value);
}

  1. HTML5 測試代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>測試localStorage</title>
</head>
?
<script>
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
}else{
var storage=window.localStorage;
storage.setItem("a","tom");
console.log(typeof storage["a"]);
//第一種方法讀取
var a1=storage.getItem("a");
console.log(a1);
}
</script>
<body>
</body>
</html>

https://java-er.com/blog/html5-localstorage-all

MORE================

html5 localStorage緩存音樂和視頻
H5 localStorage 緩存圖片
H5 本地緩存localStorage緩存計數(shù)器

網(wǎng)站標題：HTML5的localStorage緩存詳解
當前URL：http://muchs.cn/article8/jejjip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、網(wǎng)站收錄、靜態(tài)網(wǎng)站、網(wǎng)站設計、做網(wǎng)站、App設計

廣告

聲明：本網(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)

綿陽服務器托管