一、localStorage简单介绍* M% s: e: }' w3 P# T9 `
1、它是一种Web存储技术，允许在用户的浏览器中以键值对的形式存储数据。
g% a t" k6 _: l2、它可将第一次请求的数据直接存储到本地，相比于cookie可以节约带宽。可以相当于一个前端页面数据库（约5M）。
5 |% K; D: O( ]9 g6 Q9 U1 ^* @$ U6 n9 |3、它突破了cookie的4K限制，解决了cookie存储空间不足的问题。
6 x1 s" s% |/ n% T4、localStorage数据可以直接获取，减少了客户端和服务器端的交互。
/ Y. @2 k' \8 e8 f5、localStorage中的数据不会随每个HTTP请求发送到服务器。" d3 z9 {1 S2 m h% g
6、localStorage数据会持久保存，除非用户手动清除或者网站代码删除。4 Z% F E) [- H8 Z! x! n, Z
7、localStorage遵循同源策略，这意味着只有与数据存储在相同协议、域名和端口的网页才能访问这些数据。& }/ Q5 {/ S- {9 o5 [
8、安全性相比于Cookie较弱，因为localStorage数据可以通过JavaScript访问。
6 \: {5 q* j; K: h二、localStorage小例# C$ _1 r. {) k" O
a基于localStorage以上特点，下面用js简单写了一个本地“网址导航”页面，以验证在没有服务器和数据库的情况下，用户也可以借助localStorage实现对复杂数据的添加、存储、读取、清除等操作（也可以修改操作略）。; A4 z0 C; f8 D+ L* b
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>localStorage 本地存储</title>
</head>
<style>
body { padding:0; margin:0; font-size:14px;}
ul, li { list-style:none; margin:0; padding:0;}
a { text-decoration:none;}
#url,#name{width: 280px; height:30px; text-align: center;font-size:14px;margin-top: 15px;}
*{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px;padding:0px; }
.box{ margin: 0 auto; text-align: center; margin-top: 30px;width: 1300px;overflow: hidden; border: 1px solid #E9E9E9;padding-bottom: 20px;}
.box h3{ line-height: 45px; font-size: 18px;text-align: left;text-indent: 15px; border-bottom: 1px solid #E9E9E9;}
.box ul{ display: block;padding:20px;overflow: hidden;}
.box span{ font-weight:bold;}
#daohang li{float: left;width: 13.4%;text-align: center;line-height: 40px;margin: 2px;}
#daohang li a { color:#666; display:block;}
#daohang li a:hover { color:#666;}
#daohang li:hover { background:#f6f6f6;}
.btn{ width: 160px;; margin-top: 15px; font-size:20px; border:none; height: 40px; background-color:#0492de; color: #fff; cursor: pointer;font-weight:bold;}
.btnB{background-color:#d00c0c; }
</style>
<body>
<div class="box">
<h3>我的网址导航</h3>
<ul id="daohang"></ul>
</div>
<div class="box">
<h3>请添加您的网站</h3>
<span>网站名称：</span><input type="text" id="name"> </br>
<span>网站地址：</span><input type="text" id="url"></br>
<input type="button" value="添加" onclick="add()" class="btn"> <input type="button" value="清除" onclick="del()" class="btn btnB">
</div>
</body>
</html>
<script>
window.onload = function() {
var getLocalData = localStorage.getItem('localData');
showLocalData(getLocalData);
}
//输出本地存储数据
function showLocalData(getLocalData) {
if (getLocalData == null) {
var getLocalData = [];
setLocalData(getLocalData);
} else {
var jsonObj = JSON.parse(getLocalData);
for (var i = 0; i < jsonObj.length; i++) {
var msg = document.getElementById("daohang");
msg.innerHTML += "<li><a target='_blank' href='" + jsonObj[i].url + "'>" + jsonObj[i].name + "</a></li>";
}
}
}
//增加指定的本地存储数据
function add() {
var getLocalData = localStorage.getItem('localData');
getLocalData = eval('(' + getLocalData + ')');
var name = document.getElementById('name').value;
var url = document.getElementById('url').value;
//数据非空验证，其他验证略
if(!isNull(name)&&!isNull(url)){
var arr = {
"name": name,
"url": url
};
getLocalData.push(arr);
setLocalData(getLocalData);
alert("添加成功！");
location.reload();
}else{
alert("数据不能空");
return false;
}
}
//创建本地存储数据
function setLocalData(getLocalData) {
var strJsonData = JSON.stringify(getLocalData);
localStorage.setItem('localData', strJsonData);
}
//删除指定的本地存储数据
function del() {
localStorage.removeItem('localData');
alert("清除成功！");
location.reload();
}
//数据值为空判断
function isNull(val){
return (val =="" || val == undefined || val == null) ? 1 : 0;
}
</script>
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2023-7-17 08:41:20