|
方法属性 |
描述 |
|
setItem(key，value) |
该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 |
|
getItem(key) |
该方法接收一个键名作为参数，返回键名对应的值 |
|
romoveItem(key） |
该方法接收一个键名作为参数，并把该键名从存储中删除 |
|
length |
类似数组的length属性，用于访问Storage对象中item的数量 |
|
key(n) |
用于访问第n个key的名称 |
|
clear() |
清除当前域下的所有localSotrage内容 |
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<input type="text" id="username" >
<input type="button" value="localStorage 设置数据 " id="localStorageId">
<input type="button" value="localStorage 获取数据 " id="getlocalStorageId">
<input type="button" value="localStorage 删除数据 " id="removesessionStorageId">
<script>
document.getElementById("localStorageId").onclick=function(){
// 把用户在 input 里面数据的数据保存到 localStorage
var username=document.getElementById("username").value;
window.localStorage.setItem("username",username);
};
document.getElementById("getlocalStorageId").onclick=function(){
// 获取数据，从 localStorage
var username=window.localStorage.getItem("username");
alert(username);
};
document.getElementById("removesessionStorageId").onclick=function(){
// 删除 localStorage 中的数据
var username=document.getElementById("username").value;
window.localStorage.removeItem("username");
};
</script>
</body>
</html>
sessionStorage 主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。由于 sessionStroage 也是 Storage 的实例， sessionStroage 与 localStorage 中的方法基本一致，唯一区别就是存储数据的生命周期不同， locaStorage 是永久性存储，而 sessionStorage 的生命周期与会话保持一致，会话结束时数据消失。
2.3sessionStorage实现区域存储
从硬件方面理解， localStorage 的数据是存储子在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取，而 sessionStorage 的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除，需要注意的是， sessionStorage 中存储的数据只在当前浏览器窗口有效。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sessionStorage</title>
</head>
<body>
姓名： <input type="text" id="username"> 年龄： <input type="text" id="age">
<input type="button" value="sessionStorage 设置数据 " 11 id="sessionStorageId">
<input type="button" value="sessionStorage 获取数据 " id="getsessionStorageId">
<input type="button" value="sessionStorage 清除所有数据 " id="clearsessionStorageId">
<script>
// 增加数据
document.getElementById("sessionStorageId").onclick = function() {
// 获取姓名和年龄输入框的值
var username = document.getElementById("username").value;
var age = document.getElementById("age").value;
// 定义一个 user 对象用来保存获取的信息
var user = {
username: username,
age: age
}
// 使用 stringify() 将 JSON 对象序列号并存入到 sessionStorage
window.sessionStorage.setItem("user",JSON.stringify(user));
};
//sessionStorage 里面存储数据，如果关闭了浏览器，数据就会消失 ..
// 单个浏览器窗口页面有效
document.getElementById("getsessionStorageId").onclick = function() {
var valu = window.sessionStorage.getItem("user");
alert(valu);
};
// 清除所有的数据
document.getElementById("clearsessionStorageId").onclick = function() {
window.sessionStorage.clear();
};
</script>
</body>
</html>
3 总结
HTML5中的两种存储方式都比较实用，我们在设计前端页面时，可以根据相应的用户访问情况预测来增添相应的js，既增加了用户浏览的体验，又能实现存储管理的高效性，合理的利用存储空间。
到此这篇关于HTML5中的网络存储的文章就介绍到这了,更多相关html5 网络存储内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
