JavaScript&angular——如何做到多字段的网页存值

提示：个人经验，欢迎指出不足之处

---

前言

随着系统操作的不断优化，有些操作需要在网页上存值，达到系统所有界面都可调用的效果，这个值随着清除网页缓存或退出浏览器而消失。

例如：

1、当一段数据很多个页面都需要用到时，比如详情页的数据，多而繁杂字段利用就可以用到网页存值，相比较利用ajax传值以及直接在跳转路径后加上“？字段1=xx&字段2=xx......”，就显得更加方便。

2、当出现输入框条件查询时，跳转到其他页面查看详情返回至查询页时，仍需保持之前的条件查询以及查询结果，而不是刷新页面并且重新选择条件重复查询，省下重新输入条件查询的步骤。通俗点就是，查看多个页面详情数据后返回查询页仍保持最初的条件以及查询结果。

---

一、网页存值是什么？

示例：网页存值是基于浏览器的一种存值方式，该方式是为了解决大量数据在页面之间传输的一种方式。

二、代码案例

1.引入jquery

代码如下（示例）：

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
//在这里我用的是angular的语法进行示例，所以引入了angular.js
<script src="~/Scripts/AngularJS.js"></script>

2.编写代码

angular定义存值方法的代码如下（示例）：

//页面存值
//"$scope."为angular声明方法以及调用方法的写法  在这里是声明一个方法叫做sessionStorage 
    $scope.sessionStorage = function () {
        //以下var定义的数据用来模拟需要存在网页session中的大量数据
        var CreateBy = $("#CreateBy").val();
        var CustProd = $("#CustProd").val();
        var CustomerDisplayName = $("#CustomerDisplayName").val();
        var Start_Date = $("#Start_Date").val();
        var End_Date = $("#End_Date").val();
        var Rank = $("#Rank").val();
        var Status = $("#ZT").find("option:selected").val(); //此为下拉框的传值 
        var Remarks_MD = $("#Remarks_MD").val();
        //把要存在网页sessionStorage的值先存在一个数组里
        var Array = [CreateBy, CustProd, CustomerDisplayName, Start_Date, End_Date, Remarks_MD, Rank, Status];
        //通过setItem来设置sessionStorage里存的数据值（以json字符串的格式存入）
        sessionStorage.setItem('Array', JSON.stringify(Array));
    }

angular调用存值方法：

var app = angular.module('myApp', []);  //创建模块
app.controller('ProductPriceController', function ($scope, $http, $compile, $timeout) {
    //调用存值的方法，与上方方法名一直即可，属于自定义
    $scope.sessionStorage();
    //从sessionStorage里取值
    if (sessionStorage.getItem('Array') == null) {
        $scope.sessionStorage();
    }
    //如下调用，就不一 一列举了
    $("#CreateBy").val(JSON.parse(sessionStorage.getItem('Array'))[0]);
    $("#CustProd").val(JSON.parse(sessionStorage.getItem('Array'))[1]);
}

存到网页上的值查询是否存值成功的步骤：

1、在网页上按F12键

2、点击application，可以看到有个sessionStorage，

存好的值可以在这里面查询到，如下图所示：

 

此外，javascript或者jquery写页面存值，引用对应的js即可；

声明方法就直接使用function 方法名（）{....},并在你需要的地方调用即可用到。

---

总结

以上就是今天要记录的学习内容，好记性当不得烂笔头啦。