您的位置：首页 > 职场人生

讲给Android程序员看的前端教程(38)——Web Storage

2017-12-04 09:56 701 查看

版权声明

本文原创作者：谷哥的小弟

作者博客地址：http://blog.csdn.net/lfdfhl

本文视频教程：http://www.stay4it.com/my/course/37

引子

在前端开发过程中，常利用cookie存取数据；但是cookie存储数据存在一些局限性，比如：

数量和大小的限制 ：cookie的大小通常被限定在4KB。除此以外，有的浏览器限制cookie的个数，比如：低版本IE浏览器限定cookie最大个数为20个；Firefox限定cookie最大个数为50个。

性能不佳：在每次HTTP请求中都需要将cookie作为网络请求的消息头发送至服务器；所以，这势必会带来数据的重复传输并导致额外消耗流量

安全隐患：假若不采用HTTPS或者其他加密手段，那么cookie会以明文的方式在网络传播；显然，这也会带来不小的安全隐患

在HTML5中为了克服由cookie带来的一些限制新增了Web Storage。

Web Storage简介

Web Storage的出现提供了一种在cookie之外存储大量数据的方式。假如有的数据需要保存在客户端而且这些数据不需要每次都发送至服务器，那么Web Storage是个很不错的选择。

W3C中定义的Storage接口，如下所示：

interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString? getItem(DOMString key);
setter void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};

各属性和方法简述如下：

length：storage中保存的key-value对的个数

key(index)：依据索引返回key

getItem(key)：依据key得到其对应的value值

setItem(key，value)：依据key设置其对应的value值

removeItem(key)：依据key删除其对应的key-value对

clean( )：删除storage中所有的key-value对

Web Storage的两种实现：

SessionStorage：为每一次会话维持一个独立的存储区域，该存储区域在页面会话期间有效。

LocalStorage：它和SessionStorage的作用基本一致，只不过会将数据保存在硬盘长期存留。

Web Storage的使用：

我们可通过Window对象的localStorage和sessionStorage属性引用LocalStorage对象和SessionStorage对象进行数据的存储。

Web Storage使用示例

请看如下示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>storage</title>
<script type="text/javascript">
const NAME="name";
function save(){
var name=document.getElementById("name").value;
var storages=document.getElementsByName("storage");
if(storages[0].checked){
localStorage.setItem(NAME,name);
}else{
sessionStorage.setItem(NAME,name);
}
}

function get(){
var storages=document.getElementsByName("storage");
if(storages[0].checked){
var result=localStorage.getItem(NAME);
alert("name="+result);
}else{
var result=sessionStorage.getItem(NAME);
alert("name="+result);
}
}
</script>
</head>

<body>
请输入您的名字：
<input type="text" id="name">
<br><br>
请选择保存方式：
<input type="radio" name="storage" value="local" checked="checked">localStorage
<input type="radio" name="storage" value="session">sessionStorage
<br><br>
<input type="button" value="存入数据" onclick="save()"/>
<input type="button" value="获取数据" onclick="get()"/>
</body>

</html>

在该示例中，分别运用了SessionStorage和LocalStorage进行数据的存储；运行后效果如下图所示：

当数据保存到Web Storage之后，我们打开浏览器开发者工具，就可以看到这些数据了，请看下图：

看完了Web Storage，我想做Android开发的童鞋或许想起了我们熟悉的东西——SharedPreferences。嗯哼，味道差不多。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航