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

特点

1. 字符串存储:localStorage存储的值均为String 字符串
把对象转换成json字符串,就能让存储对象了;把图片转换成DataUrl(base64),就可以存储图片了。月小升试过音乐也可以转成字符串存。
2. 无法隐私:localStorage在浏览器的隐私模式下不可用
3. 爬虫情况:无法读取localStorage
4. 无法跨域: a.com 的localStorage 无法被b.com 直接读取
5. 过期时间:一直有效,客户不主动清空,那么数据一直在

判断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<storage.length;i++){
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + " - " + value);
}

6. 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>


This entry was posted in WEB前端 and tagged . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/html5-localstorage-all/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力.
2020.03.24 评论已经全局关闭,有事加QQ聊天