HTML5存储—LocalStorage 和 sessionStroage

  这几天做组织部比较投入啊，所以收获也是蛮大的。之前的页面传值这方面自己比较模糊，通过这段时间项

目中的锻炼，对这块算是稍稍有点了解了！

            在做项目的时候，页面传值一般有两种方法：

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详解

 

总结：困难总是与成长相伴！解决的困难越多，成长的越快！