web存储
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web存储相关的知识，希望对你有一定的参考价值。
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="">密 码：</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>
以上是关于web存储的主要内容，如果未能解决你的问题，请参考以下文章