HTML5存储—LocalStorage 和 sessionStroage
2016-03-27 17:30
736 查看
这几天做组织部比较投入啊,所以收获也是蛮大的。之前的页面传值这方面自己比较模糊,通过这段时间项
目中的锻炼,对这块算是稍稍有点了解了!
在做项目的时候,页面传值一般有两种方法:
1、是提交form表单,利用URL传值
。
例子:
JS中提交form表单,把年份传过去
control中接收值
2、利用ajax 传值
例子:
<span style="font-family:Comic Sans MS;font-size:18px;">functionDevelopmentQuanlityTarget()
{
CheckYear =document.getElementById("DevelopYearTime").value;
$.post('/SetAllWeightTarget/CheckDevelopmentQueryTarget?checkyear=' +CheckYear, function (data) {
$("#txtDevelopmentWeight").val(data[0].AllWeight);
});
}</span>
control中获取值
<span style="font-family:Comic Sans MS;font-size:18px;">public JsonResultCheckDevelopmentQueryTarget(int CheckYear)
{
string CheckYear1 =Request["checkyear"];
int CheckYear2 =int.Parse(CheckYear1);
List<CalculateScoreViewModel>CheckDevelopmentQueryTargetVM =iSetDevelopmentQuantifyTarget.CheckDevelopmentQueryTarget(CheckYear);
returnJson(CheckDevelopmentQueryTargetVM, JsonRequestBehavior.AllowGet);
}
</span>
在做计算得分功能的时候有这个的需求,在点击一个按钮的时候需要调到另一个页面,而且传过去两个值。由于种种原因吧,上面两种方法用起来不是特别的方便,所以就在想有没有别的方法,呵呵,苍天不负有心人啊!让我发现了新的大陆,这里给大家分享一下!
先看在本系统中 的用法:
第一个页面赋值: sessionStorage.a = "县市区定量";
第二个页面取值: var objecttype =sessionStorage["a"];
解释:
html5中的WebStorage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
localStorage的简单用法(sessionStorage与其类似):
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
localStorage.a =3;//设置a为"3"
localStorage["a"]= "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 =localStorage["a"];//获取a的值
var a2 =localStorage.a;//获取a的值
var b =localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
两篇比较好的文章链接:
HTML5 LocalStorage本地存储和sessionStorage使用
HTMl5的存储方式sessionStorage和localStorage详解
总结:困难总是与成长相伴!解决的困难越多,成长的越快!
目中的锻炼,对这块算是稍稍有点了解了!
在做项目的时候,页面传值一般有两种方法:
1、是提交form表单,利用URL传值
。
例子:
JS中提交form表单,把年份传过去
<span style="font-family:Comic Sans MS;font-size:18px;">functionCadresQualitativeTarget() { CheckYear =document.getElementById("year").value; $('#dg').datagrid({ url:"/CalculateScoreFrame/CadresCheckQualitativeTarget?checkyear=" +CheckYear, columns: [[ { field: 'QualitativeTargetName',title: '指标名称', width: 400 }, { field: 'conditioninput', title:'数据录入情况', width: 100 }, { field: 'calculateinput', title:'计算情况', width: 100 }, { field: 'operate', title: '操作', width:100 } ]] }) } </span>
control中接收值
<span style="font-family:Comic Sans MS;font-size:18px;">public JsonResultCadresCheckQualitativeTarget() { //获取前台传过来的值 string CheckYear1 =Request["checkyear"]; int CheckYear2 =int.Parse(CheckYear1); //调用服务获取所有的定性指标 List<CalculateScoreViewModel>QualitativeTargetVM = iSetQualitativeTarge.CheckQualitativeTarget(CheckYear2); //筛选出所有的市管干部定性的指标 List<CalculateScoreViewModel>CadresQualitativeTargetVM = QualitativeTargetVM.Where(s => s.BasicinfoType== "干部").ToList(); //返回定性指标实体 returnJson(CadresQualitativeTargetVM, JsonRequestBehavior.AllowGet); }</span>
2、利用ajax 传值
例子:
<span style="font-family:Comic Sans MS;font-size:18px;">functionDevelopmentQuanlityTarget()
{
CheckYear =document.getElementById("DevelopYearTime").value;
$.post('/SetAllWeightTarget/CheckDevelopmentQueryTarget?checkyear=' +CheckYear, function (data) {
$("#txtDevelopmentWeight").val(data[0].AllWeight);
});
}</span>
control中获取值
<span style="font-family:Comic Sans MS;font-size:18px;">public JsonResultCheckDevelopmentQueryTarget(int CheckYear)
{
string CheckYear1 =Request["checkyear"];
int CheckYear2 =int.Parse(CheckYear1);
List<CalculateScoreViewModel>CheckDevelopmentQueryTargetVM =iSetDevelopmentQuantifyTarget.CheckDevelopmentQueryTarget(CheckYear);
returnJson(CheckDevelopmentQueryTargetVM, JsonRequestBehavior.AllowGet);
}
</span>
在做计算得分功能的时候有这个的需求,在点击一个按钮的时候需要调到另一个页面,而且传过去两个值。由于种种原因吧,上面两种方法用起来不是特别的方便,所以就在想有没有别的方法,呵呵,苍天不负有心人啊!让我发现了新的大陆,这里给大家分享一下!
先看在本系统中 的用法:
第一个页面赋值: sessionStorage.a = "县市区定量";
第二个页面取值: var objecttype =sessionStorage["a"];
解释:
html5中的WebStorage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
localStorage的简单用法(sessionStorage与其类似):
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
localStorage.a =3;//设置a为"3"
localStorage["a"]= "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 =localStorage["a"];//获取a的值
var a2 =localStorage.a;//获取a的值
var b =localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
两篇比较好的文章链接:
HTML5 LocalStorage本地存储和sessionStorage使用
HTMl5的存储方式sessionStorage和localStorage详解
总结:困难总是与成长相伴!解决的困难越多,成长的越快!
相关文章推荐
- HTML5之启动篇-检测浏览器是否支持HTML5与第一个H5程序
- HTML5之启动篇-HTML5简介
- 用HTML5的canvas做一个时钟
- 12种超酷HTML5 SVG和CSS3浮动标签效果
- HTML5与CSS3基础(三)
- 鹅厂1.3亿UV的H5活动背后的设计细节分享
- CSS3秘笈第三版涵盖HTML5学习笔记13~17章
- Html5杂谈
- HTML5 改良的 input 元素的种类
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5新标签的方法
- 8款流行前沿的HTML5文本编辑器
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
- HTML5的优缺点是什么?
- Html5 CSS3新标签解释及用法
- CDH5.5.1 安装Spark ON Yarn环境
- HTML5 部分标签及其说明
- HTML5与CSS3基础(二)
- HTML5与CSS3基础(一)
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
- Chrome/Chromium HTML5 video 视频播放硬件加速