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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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
php 地区分类排序算法
2013/07/01 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
青春演讲稿范文
2014/05/08 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
文秘自荐信
2014/06/28 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
2015年教师新年寄语
2014/12/08 职场文书
校长一岗双责责任书
2015/05/09 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
python scipy 稀疏矩阵的使用说明
2021/05/26 Python