Web本地存储 - localStorage

关注

原创最新推荐文章于 2026-04-14 09:48:45 发布 636 阅读 AI 写同款· GEO 优化 ›

APP抓包-代理转发绕过反代理+Xposed绕过证书校验而这里的牛牛不止设置了反代理还设置了证书校验，一闪而过的三个数据包就是在校验证书。而proxifier工具的转发机制获取的是网络接口出口数据，相当于是在网络接口设代理。这个时候就可以在夜神打开牛牛开始抓包了，打开牛牛可以看到proxifier有夜神流量通过。关闭代理之后牛牛就正常了，可恶的牛牛啊，这样我没办法抓包啊，怎么办啊。模拟器开启代理，burp开启监听。打开牛牛app，牛牛不在报错。牛牛app检测的是系统代理，也就是在模拟器或手机上设置的代理。再在浏览器下载两个模块，在夜神安装，用来屏蔽证书校验。阅读详情

HTML5的Web本地存储(离线存储)是利用localStorage。

我们直接来看这个”便条贴”案列:

<!DOCTYPE html>
<html>
<head>
    <title>Web本地存储</title>
</head>
<body>
    <form>
        <input type="text" id="note_text">
        <input type="button" id="add_button" value="Add Sticky Note to Self">
    </form>
    <ul id="stickies"></ul>
</body>
<script type="text/javascript">
    window.onload = init;
    function init(){
        var button = document.getElementById("add_button");
        button.onclick = createSticky; // 按钮点击处理程序

        for(var i=0;i<localStorage.length;i++){
            var key = localStorage.key(i);
            // 检查数据项的键是否"sticky"开头，来确保它是一个便条贴。(localStorage中可能还存储其他数据项，而不仅仅是我们的便条贴)
            if (key.substring(0,6) == "sticky") {
                 var value = localStorage.getItem(key);
                 addStickyToDom(value);
            }
        }
    }

    // 编写addStickyToDom函数，向<ul>元素插入便条
    function addStickyToDom(value){
        var stickies = document.getElementById("stickies");
        var sticky = document.createElement("li");
        var span = document.createElement("span");
        span.setAttribute("class","sticky");
        span.innerHTML = value;
        sticky.appendChild(span);
        stickies.appendChild(sticky);
    }

    // 创建一个便条贴
    function createSticky(){
        var value = document.getElementById("note_text").value;
        var key = "sticky_" + localStorage.length;
        localStorage.setItem(key,value);
        addStickyToDom(value);
    }
</script>
</html>

2.能否存储数组或对象
在存储之前，完全可以把一个数组或对象转换为字符串。

<!DOCTYPE html>
<html>
<head>
    <title>Web本地存储</title>
</head>
<body>
    <form>
        <input type="text" id="note_text">
        <input type="button" id="add_button" value="Add Sticky Note to Self">
    </form>
    <ul id="stickies"></ul>
</body>
<script type="text/javascript">
    window.onload = init;
    function init(){
        var button = document.getElementById("add_button");
        button.onclick = createSticky; // 按钮点击处理程序

        var stickiesArray = getStickiesArray(); // 获取包含便条贴键的数组

        for(var i=0;i<stickiesArray.length;i++){
            var key = stickiesArray[i]; // 数组中的每一项分别是一个便条贴的键
            var value = localStorage[key]; // 从localStorage中获取相应的值
            addStickyToDom(value); //增加到DOM
        }
    }

    // 创建一个便条贴
    function createSticky(){
        var stickiesArray = getStickiesArray(); // 首先获取便条贴数组
        var currentDate = new Date();
        var key = "sticky_" + currentDate.getTime();
        var value = document.getElementById("note_text").value;
        localStorage.setItem(key,value);

        stickiesArray.push(key); // 把新键添加到数组
        // 然后将这个数组转为字符串，写回到localStorage
        localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));

        addStickyToDom(value); // 最后更新页面
    }

    // 获取存储所有便条贴键的数组
    function getStickiesArray(){
        // 首先从localStorage得到数据项
        var stickiesArray = localStorage.getItem("stickiesArray");
        if (!stickiesArray) { // 如果是第一次加载这个应用，可能还没有
            stickiesArray = [];
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));
        }else{
            // 转换为一个javascript数组
            stickiesArray = JSON.parse(stickiesArray);
        }
        return stickiesArray;
    }


    // 编写addStickyToDom函数，向<ul>元素插入便条
    function addStickyToDom(value){
        var stickies = document.getElementById("stickies");
        var sticky = document.createElement("li");
        var span = document.createElement("span");
        span.setAttribute("class","sticky");
        span.innerHTML = value;
        sticky.appendChild(span);
        stickies.appendChild(sticky);
    }

</script>
</html>

3.如何删除
删除所有数据项(使用时要当心): localStorage.clear()
删除某一个数据项: localStorage.removeItem(key);

仔细想想，我们这里删除便条贴并不只是调用removeItem方法那么简单，我们还需要处理stickiesArray。我们写个函数来干这事吧：

function deleteSticky(key){
        // 首先从localStorage删除
        localStorage.removeItem(key);

        var stickiesArray = getStickiesArray();
        if (stickiesArray) {
            for(var i=0;i<stickiesArray.length;i++){
                if (key == stickiesArray[i]) {
                    // 找到这个键后，将它从数组删除
                    stickiesArray.splice(i,1);
                }
            }
            // 最后保存新的stickiesArray到localStorage
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));
        }
    }

4.优化便条贴应用

<!DOCTYPE html>
<html>
<head>
    <title>Web本地存储</title>
</head>
<body>
    <form>
        <input type="text" id="note_text">
        <input type="button" id="add_button" value="Add Sticky Note to Self">
    </form>
    <ul id="stickies"></ul>
</body>
<script type="text/javascript">
    window.onload = init;
    function init(){
        var button = document.getElementById("add_button");
        button.onclick = createSticky; // 按钮点击处理程序

        var stickiesArray = getStickiesArray(); // 获取包含便条贴键的数组

        for(var i=0;i<stickiesArray.length;i++){
            var key = stickiesArray[i]; // 数组中的每一项分别是一个便条贴的键
            var value = localStorage[key]; // 从localStorage中获取相应的值
            addStickyToDom(key,value); //增加到DOM
        }
    }

    // 创建一个便条贴
    function createSticky(){
        var stickiesArray = getStickiesArray(); // 首先获取便条贴数组
        var currentDate = new Date();
        var key = "sticky_" + currentDate.getTime();
        var value = document.getElementById("note_text").value;
        localStorage.setItem(key,value);

        stickiesArray.push(key); // 把新键添加到数组
        // 然后将这个数组转为字符串，写回到localStorage
        localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));

        addStickyToDom(key,value); // 最后更新页面
    }

    // 获取存储所有便条贴键的数组
    function getStickiesArray(){
        // 首先从localStorage得到数据项
        var stickiesArray = localStorage.getItem("stickiesArray");
        if (!stickiesArray) { // 如果是第一次加载这个应用，可能还没有
            stickiesArray = [];
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));
        }else{
            // 转换为一个javascript数组
            stickiesArray = JSON.parse(stickiesArray);
        }
        return stickiesArray;
    }


    // 编写addStickyToDom函数，向<ul>元素插入便条
    function addStickyToDom(key,value){
        var stickies = document.getElementById("stickies");
        var sticky = document.createElement("li");
        sticky.setAttribute("id",key);
        var span = document.createElement("span");
        span.setAttribute("class","sticky");
        span.innerHTML = value;
        sticky.appendChild(span);
        stickies.appendChild(sticky);
        // 点击一个便条贴就会调用deleteSticky函数
        sticky.onclick = deleteSticky;
    }

    // 点击便条贴的事件处理
    function deleteSticky(e){
        // 得到<li>上的id
        var key = e.target.id;
        if (e.target.tagName.toLowerCase() == "span") {
            // 如果点击的是<span>则需要得到它的父元素<li>的id
            key = e.target.parentNode.id;
        }


        localStorage.removeItem(key);
        var stickiesArray = getStickiesArray();
        if (stickiesArray) {
            for(var i=0;i<stickiesArray.length;i++){
                if (key == stickiesArray[i]) {
                    // 找到这个键后，将它从数组删除
                    stickiesArray.splice(i,1);
                }
            }
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));

            // 最后还需要从页面删除这个便条贴
            removeStickyFromDOM(key);
        }
    }

    // 从DOM删除便条贴
    function removeStickyFromDOM(key){
        // 从DOM获取<li>元素
        var sticky = document.getElementById(key);
        // <ul>删除子节点<li>
        sticky.parentNode.removeChild(sticky);
    }

</script>
</html>