HTML本地存储localStorage 和 sessionStorage的使用
一、HTML 本地存储localStorage
1. localStorage的使用
localStorage不受浏览器窗口进程的限制，只要使用localStorage保存的数据，即使在新打开的浏览器窗口或者浏览器关闭后，数据依然存在。
网站在页面加载完毕后可以通过JavaScript来获取这些数据。要注意的是，在不同的浏览器中localStorage存储的数据是不能相互访问的，比如在Firefox中的localStorage存储的数据，是不能在IE或者Chrome中访问读取的。
判断是浏览器是否支持localStorage：
<script> function support_storage() { if (window.localStorage){ alert("true") }else { alert("false") } } window.onload=function () { support_storage() }
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2. localStorage的应用场合
使用localStorage存储的场合非常多，比如当一个在线的任务，需要用户填写大量的表单和数据，并且在指定的时间间隔后，才把这些数据发送到服务端。
在线购物时，用户的购物车，使用localStorage可以在购物车中保存更多的数据，等用户下次再登录时，购物车中的数据依然是存在的。或者开发的离线应用程序，用户在离线状态下把数据填写好，等在线的时候，再一次性把数据进行提交。
3. localStorage的创建和使用方法
每个localStorage对象都可以存储一系列key/value变量，key可看作变量名，value可看作变量值，使用JavaScript可以轻松地对key/value变量进行操作，常见的操作方法如下：
localStorage.length：返回限制已经存储的变量的个数。
localStorage.key(i)：返回第i个变量的键(key)。
localStorage.getItem(key)：和**localStorage.key(i)**一样，取得键为key的变量的值(读取数据)。
localStorage.setItem(key,value)：和localStorage.key=value一样，设置键为key的变量值(保存数据)。
**localStorage.removeItem(key)：**删除键为key对应的变量。
**localStorage.clear()：**清空所有变量。
示例：
<script> function support_storage() { localStorage.setItem(1, "hello1") localStorage.setItem(2, "hello2") localStorage.setItem(3, "hello3") alert("本地存储的localStorage个数：" + localStorage.length) alert("返回第2个变量的键(key)：" + localStorage.key(2)) alert("获取键为1对应的value：" + localStorage.getItem(1)) // localStorage.removeItem(1) // localStorage.clear() } window.onload = function () { support_storage() }
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
4. localStorage存储特殊类型
Web Storage不是只能处理字符串吗？那么如何存储复杂对象数据呢？
1.可以使用json对象来存储复杂对象的数据
2.利用json对象的stringify()方法，将复杂对象转变成字符串，存入Web Storage中。当Web Storage中读取时，可以通过json对象的parse()方法再转换成json对象
示例1：
<script>
window.onload = function() {
var jsonstr = { "id" : "1", "name" : "张三"
};
var jsonValue = JSON.stringify(jsonstr);//将JSON对象转换成字符串
alert(jsonValue);
localStorage.setItem(jsonstr.id, jsonValue);
var jsondata=localStorage.getItem("1");
var jsonObject=JSON.parse(jsondata);//将localStorage中的json字符串转换到JSON对象
alert(jsonObject.name);
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
示例2：
<script>
window.onload = function() {
}
function save() {
var name = document.getElementById("name").value;
var mobile = document.getElementById("mobile").value;
var address = document.getElementById("address").value; var jsonObject = new Object();
jsonObject.name = name;
jsonObject.mobile = mobile;
jsonObject.address = address; var jsonStr = JSON.stringify(jsonObject);//将JSON对象转换到字符串
localStorage.setItem(mobile, jsonStr);
}
function search() {
var mobile = document.getElementById("inputMobile").value; var jsonStr = localStorage.getItem(mobile);
var jsonObject = JSON.parse(jsonStr);//将localStroage中的json字符串转换成JSON对象 if (jsonObject == null) { document.getElementById("show").innerHTML = "未找到该手机对应的用户";
} else { document.getElementById("show").innerHTML = mobile + "的机主是：" + jsonObject.name + ",地址：" + jsonObject.address;
}
}
function showlist() {
var list = document.getElementById("list");
var html = "";
html += "<table border='1'>";
html += "<tr><td>手机号</td><td>机主</td><td>地址</td></tr>";
for (var i = 0; i < localStorage.length; i++) { html += "<tr>"; var key = localStorage.key(i); var values = localStorage.getItem(key); var jsonObject = JSON.parse(values); html += "<td>" + key + "</td>"; html += "<td>" + jsonObject.name + "</td>"; html += "<td>" + jsonObject.address + "</td>"; html += "</tr>";
}
html += "</table>"; list.innerHTML = html;
} window.addEventListener("storage", function(e) { alert(e.key + "的值被网页：" + e.url + "，由" + e.oldValue + "改变为：" + e.newValue); console.log("数据改变了！"); }, false);
</script>
</head>
<body>
姓名:
<input type="text" id="name" />
<br /> 手机:
<input type="text" id="mobile" />
<br /> 地址:
<input type="text" id="address" />
<br />
<input type="button" onclick="save()" value="新增" />
<hr />
输入手机号：
<input type="text" id="inputMobile">
<input type="button" onclick="search()" value="查询机主" />
<div id="show"></div>
<br />
<input type="button" onclick="showlist()" value="显示所有列表信息" />
<div id="list"></div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
二、HTML 会话存储SessionStorage
1. SessionStorage的使用
SessionStorage和localStorage最大的一个区别是：SessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前存储的就已经被清除。而localStorage是一个持久化的存储，并不局限于会话。
SessionStorage方法针对一个session进行数据存储，当用户关闭浏览器后，数据删除。如果不需要在用户新打开一个窗口依然能被访问，可以使用SessionStorage。比如：在运行某个应用的两个实例或者在运行多个窗口浏览时，不希望数据之间有关联，可以使用SessionStorage。
sessionStorage的存储数据、获取数据方法和localStorage相同，示例：
<script>
window.onload = function() {
sessionStorage.setItem("hobby", "唱歌");
}
</script>
- 1
- 2
- 3
- 4
- 5
文章来源: csp1999.blog.csdn.net，作者：兴趣使然の草帽路飞，版权归原作者所有，如需转载，请联系作者。
原文链接：csp1999.blog.csdn.net/article/details/106930038
- 点赞
- 收藏
- 关注作者
评论（0）