HTML5本地存储应用sessionStorage和localStorage
在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定.
html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数据存储,这两者有什么特点呢?
sessionStorage
sessionStorage属于临时会话,数据存储的有效期为:从页面打开到页面关闭的时间段,属于窗口的临时存储,页面关闭,本地存储消失
localStorage
- 永久存储(可以手动删除数据)
- 存储量限制 ( 5M )
- 客户端完成,不会请求服务器处理
- sessionStorage数据在页面之间不能共享、 而localStorage可以实现页面之间共享
sessionStorage的应用:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
window.sessionStorage.setItem("name", aInput[3].value );
};
aInput[1].onclick = function(){
alert(window.sessionStorage.getItem("name" ));
};
aInput[2].onclick = function(){
window.sessionStorage.removeItem("name" );
};
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>
localStorage的应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//localStorage : 永久性存储
window.localStorage.setItem("name", aInput[3].value);
window.localStorage.setItem("name2", 'aaaaa');
};
aInput[1].onclick = function(){
alert( window.localStorage.getItem( "name" ) );
alert( window.localStorage.getItem( "name2" ) );
};
aInput[2].onclick = function(){
window.localStorage.removeItem("name");
// window.localStorage.clear();
};
}
</script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function () {
var aInput = document.getElementsByTagName("input");
var oT = document.querySelector("textarea"); if (window.localStorage.getItem("userName")) {
aInput[0].value = window.localStorage.getItem("userName");
} for (var i = 0; i < aInput.length; i++) {
if (window.localStorage.getItem('sex') == aInput[i].value) {
aInput[i].checked = true;
}
} if (window.localStorage.getItem("note")) {
oT.value = window.localStorage.getItem("note");
} window.onunload = function () {
if (aInput[0].value) {
window.localStorage.setItem("userName", aInput[0].value);
} for (var i = 0; i < aInput.length; i++) {
if (aInput[i].checked == true) {
window.localStorage.setItem('sex', aInput[i].value);
}
} if (oT.value) {
window.localStorage.setItem('note', oT.value);
}
}
}
</script>
</head>
<body>
<p>
用户名: <input type="text"/>
</p> <p>
性别: <br/>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</p> <p>
备注:
<textarea cols="30" rows="10"></textarea>
</p> </body>
</html>
HTML5本地存储应用sessionStorage和localStorage的更多相关文章
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- JS操作cookie以及本地存储(sessionStorage 和 localStorage )
JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...
- H5本地存储:sessionStorage和localStorage
作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...
- HTMl5的存储方式sessionStorage和localStorage区别及联系
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据. localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手 ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage与sessionStorage
在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
- HTML5本地存储localStorage与sessionStorage详解
前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
随机推荐
- YiShop_商城系统如何做好口碑营销
口碑营销是指企业在品牌建立过程中,通过客户间的相互交流将自己的产品信息或者品牌传播开来.口碑是目标,营销是手段,产品是基石.那么,商城系统如何做好口碑营销呢? 下面由YiShop小编带你了解一下:1 ...
- Java SE 8 流库
1. 流的作用 通过使用流,说明想要完成什么任务,而不是说明如何去实现它,将操作的调度留给具体实现去解决: 实例:假如我们想要计算某个属性的平均值,那么我们就可以指定数据源和属性,然后,流库就可以对计 ...
- “use strict” 严格模式使用(前端基础系列)
ECMAscript5添加一种严格模式的运行模式("use strict"),让你的js语句在更加严格的环境下进行运行: 一.主要作用: 消除版本javascript中一些不合理及 ...
- Solr6.5.0配置中文分词器配置
准备工作: solr6.5.0安装成功 1.去官网https://github.com/wks/ik-analyzer下载IK分词器 2.Solr集成IK a)将ik-analyzer-solr6.x ...
- 基于AOE网的关键路径的求解
[1]关键路径 在我的经验意识深处,“关键”二字一般都是指临界点. 凡事万物都遵循一个度的问题,那么存在度就会自然有临界点. 关键路径也正是研究这个临界点的问题. 在学习关键路径前,先了解一个AOV网 ...
- mongoDB之集合操作
mongoDB之集合操作 mongoDB中的集合相当于mysql中的表. mongoDB中集合的创建: 第一种方式:不限制集合大小 db.createCollection("集合名称&q ...
- OpenXml读取word内容(三)
内容和表格内容一起读: word内容: 代码: public static void ReadWordByOpenXml(string path) { using (WordprocessingDoc ...
- 闲来无事研究一下酷狗缓存文件kgtemp的加密方式
此贴为本人原创,转载请注明出处 序 前几天更新了被打入冷宫很久的酷狗,等进入之后就感觉菊花一紧----试 听 居 然 都 要 开 通 音 乐 包(高品和无损)才行了,WTF! 这意味着以前缓存的都听不 ...
- java.lang.RuntimeException: Canvas: trying to use a recycled bitmap android.graphics.Bitmap@412d7230
近期遇到了如标题这种错误,再次记录解决方法.本文參考帖子: http://bbs.csdn.net/topics/390196217 出现此bug的原因是在内存回收上.里面用Bitamp的代码为: t ...
- opencv批处理提取图像的特征
____________________________________________________________________________________________________ ...