HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用


Posted in HTML / CSS onDecember 09, 2012

使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。

页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用。

sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失。

某个博主的测试localStorage兼容情况,如下
Chrome4+ 开始支持localStorage

Firefox3.5+开始支持localStorage
Firefox1.5+支持globalStorage

IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata

Safari 4+ 支持localStorage
Opera10.5+支持localStorage

HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用 

复制代码
代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea {
width: 300px;
height: 300px;
}
.button {
width: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
//使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。
//页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。
function saveSession() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var mydata = t2.value;
var oStorage = window.sessionStorage;
oStorage.mydata = mydata;
t1.value += "sessionStorage保存mydata:" + mydata + "\n";
}
function readSession() {
var t1 = document.getElementById("t1");
var oStorage = window.sessionStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
t1.value += "sessionStorage读取mydata:" + mydata + "\n";
}
function cleanSession() {
var t1 = document.getElementById("t1");
var oStorage = window.sessionStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
oStorage.removeItem("mydata");
t1.value += "sessionStorage清除mydata:" + mydata + "\n";
}
function saveStorage() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var mydata = t2.value;
var oStorage = window.localStorage;
oStorage.mydata = mydata;
t1.value += "localStorage保存mydata:" + mydata + "\n";
}
function readStorage() {
var t1 = document.getElementById("t1");
var oStorage = window.localStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
t1.value += "localStorage读取mydata:" + mydata + "\n";
}
function cleanStorage() {
var t1 = document.getElementById("t1");
var oStorage = window.localStorage;
var mydata = "不存在";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
oStorage.removeItem("mydata");
t1.value += "localStorage清除mydata:" + mydata + "\n";
}
</script>
<div>
<textarea id="t1"></textarea>
<label>需要保存的数据: </label>
<input type="text" id="t2" />
<input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" />
<input type="button" class="button" onclick="readSession()" value="session读取" />
<input type="button" class="button" onclick="cleanSession()" value="session清除" />
<input type="button" class="button" onclick="saveStorage()" value="local保存" />
<input type="button" class="button" onclick="readStorage()" value="local读取" />
<input type="button" class="button" onclick="cleanStorage()" value="local清除" />
</div>
</body>
</html>
HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 #HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 #HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 #HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 #HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 #HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 #HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 #HTML / CSS
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
js选项卡的制作方法
2017/01/23 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python的Tqdm模块的使用
2018/01/10 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python标准库OS模块详解
2020/03/10 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python如何变换环境
2020/07/21 Python
详解python tcp编程
2020/08/24 Python
python一些性能分析的技巧
2020/08/30 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
主持人演讲稿
2014/05/13 职场文书
建筑工地宣传标语
2014/06/18 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电