html5 客户端缓存,HTML5的localStorage缓存详解

发表于 2020-02-25 09:00:57 by 月小升

HTML5加入了

浏览器支持情况

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 字符串

把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl(base64)，就可以存储图片了。

判断localStorage

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";

2. HTML5 读取localStorage

标准写法

var a1=storage.getItem("name");

官方不太推荐，但是支持的写法

var a2=storage.name;

var a3=storage["name"];

3. HTML5 更新localStorage

更新？html5的localStorage 存的时候是单键值对 key-value模式，重新写一遍name就是更新了

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

4. HTML5 删除localStorage

storage.removeItem("name");

5. HTML5 遍历localStorage 所有key 和 value数据

var storage=window.localStorage;

storage.setItem("name1","tom");

storage.setItem("name2","jack");

storage.setItem("name3","Lucy");

for(var i=0;i

var key = storage.key(i);

var value = storage.getItem(key);

console.log(key + " - " + value);

}

6. HTML5 测试代码

测试localStorage

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);

}

This entry was posted in WEB前端 and tagged localStorage. Bookmark the permalink.

月小升QQ 2651044202, 技术交流QQ群 178491360

首发地址：月小升博客 – https://java-er.com/blog/html5-localstorage-all/

无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢