HTML5中localStorage缓存的使用方法
什么是localStorage
创新互联建站服务项目包括临西网站建设、临西网站制作、临西网页制作以及临西网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,临西网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到临西省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
HTML5加入了localStorage,作为客户本地存储文件,之前用cookie,但是每条cookie空间为4K localStorage 支持5M
一张图了解下客户端浏览器的存储发展史
浏览器支持情况
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
特点
- 字符串存储:localStorage存储的值均为String 字符串
把对象转换成json字符串,就能让存储对象了;把图片转换成DataUrl(base64),就可以存储图片了。月小升试过音乐也可以转成字符串存。 - 无法隐私:localStorage在浏览器的隐私模式下不可用
- 爬虫情况:无法读取localStorage
- 无法跨域: a.com 的localStorage 无法被b.com 直接读取
- 过期时间:一直有效,客户不主动清空,那么数据一直在
判断localStorage
if(!window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//开始浪
}
HTML5 localStorage 增删改遍历
- HTML5 写入localStorage
标准写法
var storage=window.localStorage;
storage.setItem("name","tom");
官方不太推荐,但是支持的写法
storage["name"]="tom";
storage.name="tom";
- HTML5 读取localStorage
标准写法
var a1=storage.getItem("name");
官方不太推荐,但是支持的写法
var a2=storage.name;
var a3=storage["name"];
- HTML5 更新localStorage
更新?html5的localStorage 存的时候是单键值对 key-value模式,重新写一遍name就是更新了
storage.setItem("name","Jack");
- HTML5 删除localStorage
storage.removeItem("name");
- 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 value = storage.getItem(key);
console.log(key + " - " + value);
}
- HTML5 测试代码
https://java-er.com/blog/html5-localstorage-all
MORE================
html5 localStorage缓存音乐和视频
H5 localStorage 缓存图片
H5 本地缓存localStorage缓存计数器
文章题目:HTML5中localStorage缓存的使用方法
文章分享:http://myzitong.com/article/pijsdi.html