HTML5本地存储之Web Storage详解

站长资源 2024/11/23 佚名

2 0 1

在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>

通过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中的存储信息：

用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 = "当前还没有数据";
}
}

最后的效果图如下：

Web Storage存储图片

前面我们已经提到过，本地存储只支持字符串的存取，那么我们要做的就是将图片转换成 Data URI 。其中一种实现方式就是用canvas元素来加载图片。然后你可以以Data URI的形式从canvas中读取图片。
保存图片的函数如下：

JavaScript Code复制内容到剪贴板

function setImg(key,src){
var img = document.createElement('img');
//当图片加载完成的时候触发回调函数
img.addEventListener("load",function(){
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
//确保canvas元素大小和图片的尺寸一致
imgCanvas.width = this.width;
imgCanvas.height = this.height;
//渲染图片到canvas中
imgContext.drawImage(this,0,0,this.width,this.height);
//用data url的形式取出
img.crossOrigin = "*"; //防止跨域取照片出错
var imgAsDataURL = imgCanvas.toDataURL("image/png");
//保存到本地存储中
try{
localStorage.setItem(key, imgAsDataURL);
}
catch(e){
alert("保存失败！请重试。。。");
}
}, false);
img.src = src;
}

该函数接收两个参数，一个是key值，还有一个是图片的路径，通过setImg(“img1”,”1.jpg”)保存图片到localStorage，我们可以查看Local Storage的存储情况：

获取并显示的代码函数如下：

JavaScript Code复制内容到剪贴板

function getImg(key){
var srcStr = localStorage.getItem(key);
var imgObj = document.createElement('img');
imgObj.src = srcStr;
document.body.appendChild(imgObj);
}

该函数只接收一个参数：需要查找图片的key值：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

HTML5,本地存储,Web,Storage

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“HTML5本地存储之Web Storage详解”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

HTML5本地存储之Web Storage详解

用html5的canvas和JavaScript创建一个绘图程序的简单实例

Html5实现移动端、PC端刮刮卡效果

评论“HTML5本地存储之Web Storage详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

HTML5本地存储之Web Storage详解

用html5的canvas和JavaScript创建一个绘图程序的简单实例

Html5实现移动端、PC端 刮刮卡效果

评论“HTML5本地存储之Web Storage详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

Html5实现移动端、PC端刮刮卡效果

RTX 5090要首发性能要翻倍！三星展示GDDR7显存