localStorage存储

来源：互联网发布：java jdk jre下载官网编辑：程序博客网时间：2024/06/05 20:16

localStorage 对象存储的数据没有时间限制。数据以键/值对存在, web网页的数据只允许该网页访问使用。

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
将用户名和密码保存到localstorage中，在页面展示

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            td {text-align: center;}        </style>    </head>    <body>        <label for="">用户名：</label><input type="text" id="username" /><br>        <label for="">密&emsp;码：</label><input type="password" id="password" /><br>        <button  onclick="btn()">保存</button><button onclick="del()">清空用户信息</button>        <div id="table-box" style="display: none;">            <table border="1" cellpadding="0" cellspacing="0" id="table" width="300" >                <caption>用户信息表</caption>                <tr>                    <th>序号</th>                    <th>用户名</th>                    <th>密码</th>                    <th>操作</th>                </tr>            </table>        </div>        <script>            window.onload = function() { //读取缓存                var str = "";                var Text = localStorage.getItem("T");                Text = JSON.parse(Text); //把字符串转换成JSON对象                if(Text != null) { //localStorage不为空                    show()                    var objs = Text.te;                    for(var i = 0; i < objs.length; i++) {                        str += "<tr><td>" + (i + 1) + "</td><td>" + objs[i].name + "</td><td>" + objs[i].pd + "</td><td><button onclick='del_one("+objs[i].name+")'>删除</button></td></tr>";                    }                    document.getElementById("table").innerHTML += str;                }            }            function btn() { //存入缓存                var u = document.getElementById("username").value;                var b = document.getElementById("password").value;                if(u != '' && b != '') {                    add(u, b)                }            }            function add(a, b) { //设置缓存                var Save = false;                var Index = table.rows.length;                var Text = localStorage.getItem("T");                Text = JSON.parse(Text); //将一个 JSON 字符串转换为对象。                if(Text != null && Text != "underfind") {                    var objs = Text.te;                    for(var i = 0; i < objs.length; i++) { //遍历缓存                        Save = false;                        if(objs[i].name == a) { //统计缓存中相同数据个数                            alert("用户名已存在")                            Save = true;                            break;                        }                    }                    if(!Save) {  //如果条件为真，则执行                        var str = "<tr><td>" + (Index) + "</td><td>" + a + "</td><td>" + b + "</td><td><button onclick='del_one("+a+")'>删除</button></td></tr>";                        document.getElementById("table").innerHTML += str;                        objs[objs.length] = {                            num: Index,                            name: a,                            pd: b                        };                    }                } else {                    show()                    var str = "<tr><td>" + (Index) + "</td><td>" + a + "</td><td>" + b + "</td><td><button onclick='del_one("+a+")'>删除</button></td></tr>";                    document.getElementById("table").innerHTML += str;                    var Text = { //要存储的JSON对象                        te: [{                            num: Index,                            name: a,                            pd: b                        }]                    }                }                Text = JSON.stringify(Text); //将JSON对象转化成字符串                localStorage.setItem("T", Text); //用localStorage保存转化好的的字符串                document.getElementById("username").value = '';                document.getElementById("password").value = '';            }            function del() { //清空缓存                localStorage.clear();                window.location.reload();            }            function show(){                document.getElementById("table-box").style.display ="block";            }            function del_one(event){                var Text = localStorage.getItem("T");                 Text = JSON.parse(Text); //把字符串转换成JSON对象                var objs = Text.te;                for(var i = 0; i < objs.length; i++) {                    if(objs[i].name == event) { //说明存在该用户                        objs.splice(i, 1); //删除某一条数据                        Text = JSON.stringify(Text); //将JSON对象转化成字符串                        localStorage.setItem("T", Text); //用localStorage保存转化好的的字符串                    }                }                if(objs.length == "0"){localStorage.clear();}                window.location.reload();            }        </script>    </body></html>

阅读全文

0 0

localStorage存储

localStorage 对象存储的数据没有时间限制。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

将用户名和密码保存到localstorage中，在页面展示

localStorage 对象存储的数据没有时间限制。数据以键/值对存在, web网页的数据只允许该网页访问使用。