客户端(浏览器端)存储数据有诸多益处，最主要的一点是能快速访问(网页)数据。目前常见的浏览器端数据存储方法有：Cookies，Local Storage，Session Storage，IndexedDB
取值，存值，删除（用于浏览器存储客户端的访问数据）
1.Cookies
Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言，cookies 会由服务端发送给客户端，客户端存储下来，然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话，追踪用户信息等事情。
Cookies 的优点
- 能用于和服务端通信
- 当 cookie 快要自动过期时，我们可以重新设置而不是删除
Cookies 的缺点
- 增加了文档传输的负载
- 只能存储少量的数据
- 只能存储字符串
- 潜在的 安全问题
- 自从有 Web Storage API (Local and Session Storage)，cookies 就不再被推荐用于存储数据了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cookies客户端读写</title>
</head>
<body>
<button type="button" onclick="addCookies()">存值</button>
<button onclick="getCookies()">取值</button>
<button onclick="removeCookies()">删除</button>
<script src="js/js.cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function addCookies(){
Cookies.set("price","200",{expires:2});
}
function getCookies(){
var price=Cookies.get("price");
alert(‘价格‘+price);
}
function removeCookies(){
Cookies.remove("price");
}
</script>
</body>
</html>
2.localStorage
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>
3.sessionStorage
sessionStorage：浏览器关闭后其内部setItem的值会被自动删除
<!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>
4.Web SQL Database
<!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(‘删除成功‘);
},
function(tx, error) {
log(‘删除失败‘ + error.message);
});
});
}
function log(info) {
$("#msg")[0].innerHTML += info + "<br/>";
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/liangyaofeng/p/10070112.html
时间： 2024-11-10 08:20:14