HTML5本地存储之Web Storage详解

程序员文章站 2022-07-22 21:10:44

这篇文章主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料，Web Storage如何用JSON存储多个数据，感兴趣的小伙伴们可以参考一下 ... 16-07-04...

在html5出现之前，如果开发者需要在客户端存储少量的数据，只能通过cookie来实现，但是cookie存在几个不足点：

•每个域名下cookie的大小限制在4kb。
•cookie会包含在每个http请求中，这样会导致发送重复的数据。
•cookie在网络传输过程中没有加密，存在安全隐患。

在html5新增了web storage功能，web storage官方建议为每个网站是5mb，能存储比cookie更多的数据，并且具有比cookie更强大的功能。web storage现在已经得到了firefox、opera、chrome、safari各主流浏览器的支持。

web storage简介

web storage又分为session storage和local storage：

session storage：与session类似，session storage保存的数据生存期限与session期限相同，用户session结束时，session storage保存的数据也就消失了。

local storage： local storage保存的数据一直在本地，除非用户或程序显式地清楚，否则这些数据会一致存在。

window对象中提供了sessionstorage和localstorage两个属性，这两个属性分别代表了session storage和local storage。这个两个功能和用法几乎是相同的，只是它们保存数据的生存期限不同而已。storage提供了以下属性和方法（以localstorage为例）：

•localstorage.length：获取key-value对的数目；
•localstorage.key(index)：获取第index索引的key；
•localstorage.getitem(key)：获取指定key对应的value；
•localstorage.setitem(key,value)：保存指定的key-value对；
•localstorage.removeitem(key)：删除指定key对应的key-value对；
•localstorage.clear()：删除所有key-value对。

需要注意的是，key和value都必须为字符串，换言之，web storage的api只能操作字符串。那么一些不是字符串的数据，我们可以通过json等方式将其转化成字符串格式后在操作。

web storage用json存储多个数据

我们通过一个小程序来熟悉一下相关属性和方法的基本用法：

•录入学生的基本信息（包括学号，姓名，年级，性别），以学号为key值来存储到local storage中；
•通过学号来查询学生的基本信息；
•显示全部学生的信息；

首先我们设计html页面

xml/html code复制内容到剪贴板

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html本地存储之web storage</title>
<style type="text/css">
#content{
border: 1px solid #3d19dd;
width:600px;
text-align:center;
padding: 10px 0;
margin: 0 auto;
}
#content input{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content">
<label for="user_num">学号：</label>
<input type="text" id="user_num" name="user_num" />
<br/>
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" />
<br/>
<label for="grade">年级：</label>
<input type="text" id="grade" name="grade"/>
<br/>
<label for="sex">性别：</label>
<input type="text" id="sex" name="sex"/>
<br/>
<input type="button" onclick="save()" value="添加名单"/>
<hr/>
<label for="search_num">输入学号：</label>
<input type="text" id="search_num" name="search_num"/>
<input type="button" onclick="find()" value="查找学生信息"/>
<p id="find_result"><br/></p>
<hr/>
<input type="button" onclick="show()" value="显示所有">
<div id="list">
</div>
</div>
<br />
</body>
</html>

HTML5本地存储之Web Storage详解

通过js实现学生信息保存到local storage中，通过分析我们发现需要保存的学生信息包括多个字段，这时，我们可以利用json的stringify()方法，将复杂对象转变成字符串，存入web storage中；当从web storage中读取时，可以通过json的parse()方法再转换成json对象：

javascript code复制内容到剪贴板

function save(){
var user_num = document.getelementbyid("user_num").value;
var user_nameelement = document.getelementbyid("user_name").value;
var gradeelement = document.getelementbyid("grade").value;
var sexelement = document.getelementbyid("sex").value;
var msg = {
user_name: user_nameelement,
grade: gradeelement,
sex: sexelement,
};
localstorage.setitem(user_num,json.stringify(msg));
}

我们往localstorage里存入三条学生信息，并查看localstorage中的存储信息：

HTML5本地存储之Web Storage详解

用js实现通过学号查找学生信息时，需要注意取出的value值为json字符串，需要通过json的parse()方法再转换成json对象，代码如下：

javascript code复制内容到剪贴板

function find(){
var user_num = document.getelementbyid("search_num").value;
var str = localstorage.getitem(user_num);
var msg = json.parse(str);
var find_result = document.getelementbyid("find_result");
find_result.innerhtml = "学号为："+user_num+"的基本信息：姓名："+msg.user_name + "，年级：" + msg.grade+",性别："+msg.sex;
}

同理，显示全部学生信息时，也一样需要将取出的value字符串转换成json对象：

javascript code复制内容到剪贴板

function show(){
var list = document.getelementbyid("list");
if(localstorage.length>0){
var result = "<table border='1' style='width:300px; margin:0 auto;'>";
result += "<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>";
for(var i=0;i<localstorage.length;i++){
var user_num = localstorage.key(i);
var str = localstorage.getitem(user_num);
var msg = json.parse(str);
result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";
}
result += "</table>";
list.innerhtml = result;
}else{
list.innerhtml = "当前还没有数据";
}
}