HTML5 WebStorage-阿里云开发者社区

HTML5 WebStorage

2017-11-14 1269

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

HTML5 中引入了WebStorage的概念，可以让客户端本地保存数据，它接触了传统用cookie存放数据的局限性（只有4KB)

WebStorage分两种：

(1)sessionStorage,这种存储是放在session对象中，一旦浏览器关闭就没了，是临时保存。

(2)localStorage,这种存储对象是放在硬盘上的，所以就算浏览器关闭还有，是永久保存。

我写了一个例子程序来演示这两种情况的区别：

这个页面就是2组组件，第一组组件用于演示sessionStorage,第二组组件用于演示localStorage:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Web Storage Demo</title>
<script type="text/javascript" src="js/storage1.js" ></script>
</head>
<body>
<h1>Web Storage 示例</h1>
<h3>sessionStorage的存取例子</h3>
<p id="sessionStorageMessage" >这里会显示sessionStorage的内容</p>
<input type='text' id="sessionStorageInput"><br>
<input type="button" value="保存sessionStorage数据" onclick="saveSessionStorage('sessionStorageInput');"><br>
<input type="button" value="读取sessionStorage数据" onclick="loadSessionStorage('sessionStorageMessage');"><br>
<h3>localStorage的存取例子</h3>
<p id="localStorageMessage" >这里会显示localStorage的内容</p>
<input type='text' id="localStorageInput"><br>
<input type="button" value="保存localStorage数据" onclick="saveLocalStorage('localStorageInput');"><br>
<input type="button" value="读取localStorage数据" onclick="loadLocalStorage('localStorageMessage');"><br>
</body>

js代码中利用了HTML5中与sessionStorage,localStorage相关的API进行数据的存储和读取。

初始状态，应该是：

我在sessionStorage中放入"Charles 是帅哥"字符串，通过输入这个字符串然后点击“保存sessionStorage数据”按钮，同时我在localStorage中放入"Jessica 是美女"字符串，通过输入字符串并且点击“保存localStorage"按钮，如图：

下面，演示从storage中获取已经保存的数据：

（a）保持浏览器不关闭状态

分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮，如图：

这里可以看出，在浏览器不关闭的情况下，也就是session没有失效状态下，sessionStorage（临时存储）和localStorage(永久存储）的内容都被正确的读取了

（b)重启浏览器

我们重启浏览器，然后分别点击“读取sessionStorage数据”和“读取localStorage数据”按钮，如图：

这里可以看到，sessionStorage(临时存储）上的数据无法被读出来，但是localStorage（永久存储）上的数据可以被读出来

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/855170，如需转载请自行联系原作者

HTML5 WebStorage