时间：2021-07-01 10:21:17 帮助过：32人阅读
Local Storage 是 Web Storage API 的一种类型，能在浏览器端存储键值对数据。Local Storage 因提供了更直观和安全的API来存储简单的数据，被视为替代 Cookies 的一种解决方案。
从技术上说，尽管 Local Storage 只能存储字符串，但是它也是可以存储字符串化的JSON数据。这就意味着，Local Storage 能比 Cookies 存储更复杂的数据。
localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。 过期策略：localstorage永久存储，不过期，除非手动删除，sessionstorage在重启浏览器、关闭页面或新开页面时失效。Local Storage 的优点
相比于Cookies：
Local Storage 的缺点
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>localStorage 本地存储</title> </head> <body> <button onclick="add()">写</button> <button onclick="read()">读</button> <button onclick="update()">修改</button> <button onclick="del()">删除</button> <script type="text/javascript"> function add(){ localStorage.setItem("name","平板电脑"); localStorage["price"]=8000; localStorage.number=10; } function read(){ console.log(localStorage.getItem("name")); console.log(localStorage["price"]); console.log(localStorage.number); } function update(){ console.log(localStorage.setItem("name","笔记本电脑")); } function del(){ localStorage.removeItem("price"); localStorage.clear(); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sessionStorage 本地存储</title> </head> <body> <button onclick="add()">添加</button> <button onclick="read()">获取</button> <button onclick="del()">删除</button> <button onclick="update()">修改</button> <span id="span1"></span> <h1 id="msg"></h1> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var msg=document.querySelector("#msg"); var name=sessionStorage.getItem("name"); $("#span1").html(name); function add(){ sessionStorage.setItem("name","小米"); sessionStorage["price"]=2000; sessionStorage.number=2; } function read(){ console.log(sessionStorage.getItem("name")); console.log(sessionStorage["price"]); console.log(sessionStorage.number); msg.innerHTML+=sessionStorage.getItem("name")+"<br/>"; msg.innerHTML+=sessionStorage["price"]+"<br/>"; msg.innerHTML+=sessionStorage.number+"<br/>"; } function del(){ sessionStorage.removeItem("price"); sessionStorage.clear(); } function update(){ sessionStorage.setItem("name","红米"); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #file1{ width: 300px; height: auto; } </style> <body> <h1>Web SQL Database</h1> <table id="table1" border="1"> <tr> <th>序号</th> <th>编号</th> <th>名称</th> <th>价格</th> <th>操作</th> </tr> </table><br /> <fieldset id="file1"> <legend>商品信息</legend> <input type="hidden" id="id" name="id" /><br /> <label for="id">编号：</label> <input type="text" id="fid" name="fid" /><br /> <label for="name">名称：</label> <input type="text" id="name" name="name" /><br /> <label for="price">价格：</label> <input type="text" id="price" name="price" /><br /><br /> <button onclick="insert()">添加</button> <button ondblclick="update()">更新</button> </fieldset> <h2 id="msg"></h2> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var db; function createfiuitsDB() { //创建/打开数据库 db = openDatabase("fruitsDB", 1.0, "水果数据库", 1024 * 1024 * 3, function() { log("创建/打开数据库成功"); }); } createfiuitsDB(); createtable(); select(); function createtable() { //创建表 db.transaction(function(tx) { tx.executeSql("create table if not exists fruits(id integer primary key autoincrement,fid int not null,name text not null,price float not null)", [], function(tx, result) { log("创建表成功"); }, function(tx, error) { log("创建表失败" + error.Message); }); }); } function droptable() { //删除表 db.transaction(function(tx) { tx.executeSql("drop table if exists fruits", [], function(tx, result) { log("删除表成功"); }, function(tx, error) { log("删除表失败" + error.Message); }); }); } function select() { //加载数据 $("#table1 tr:gt(0)").remove(); db.transaction(function(tx) { tx.executeSql("select id,fid,name,price from fruits", [], function(tx, result) { for(var i = 0; i < result.rows.length; i++) { var tr = $("<tr/>"); $("<td/>").text(result.rows.item(i)["id"]).appendTo(tr); $("<td/>").text(result.rows.item(i)["fid"]).appendTo(tr); $("<td/>").text(result.rows.item(i)["name"]).appendTo(tr); $("<td/>").text(result.rows.item(i)["price"]).appendTo(tr); var del = $("<button onclick=‘del(" + result.rows.item(i)["id"] + ",this)‘ >删除</button>") var edit = $("<button onclick=‘edit(" + result.rows.item(i)["id"] + ",this)‘ >编辑</button>") $("<td/>").append(del).append(edit).appendTo(tr); tr.appendTo("#table1"); } }, function(tx, error) { log(‘创建表失败‘ + error.message); }); }); } function edit(id) { //编辑数据 db.transaction(function(tx) { tx.executeSql("select id,fid,name,price from fruits where id=?", [id],function(tx, result) { $("#fid").val(result.rows.item(0)["fid"]); $("#name").val(result.rows.item(0)["name"]); $("#price").val(result.rows.item(0)["price"]); $("#id").val(result.rows.item(0)["id"]); }, function(tx, error) { log(‘编辑失败‘ + error.message); }); }); select(); } function insert() { //添加数据 var f = document.getElementById("fid").value; var n = document.getElementById("name").value; var p = document.getElementById("price").value; db.transaction(function(tx) { tx.executeSql("insert into fruits(fid,name,price) values(?,?,?)", [f, n, p], function(tx, result) { log("添加成功"); }, function(tx, error) { log("添加失败" + error.Message); }); }); select(); } function update() { //更新数据 var i = document.getElementById("id").value; var f = document.getElementById("fid").value; var n = document.getElementById("name").value; var p = document.getElementById("price").value; db.transaction(function(tx) { tx.executeSql("update fruits set fid=?,name=?,price=? where id=?", [f,n,p,i], function(tx, result) { log("修改成功"); }, function(tx, error) { log("修改失败" + error.Message); }); }); select(); } function del(id, link) { //删除数据 db.transaction(function(tx) { tx.executeSql("delete from fruits where id=?", [id],function(tx, result) { $(link).closest("tr").remove(); log(‘删除成功‘); }, functi
