发表于: 2017-07-06 23:00:39

1 917


今天完成的事情:

1、学习各种传参方法:【URL】【cookie】【localstorage】【sessionstorage】 和基于angular的传参。


明天计划的事情:

继续任务,学习angular。


遇到的问题:

url传参后怎么获取?简单点的方法?


收获:

1、url传参优点:

URL地址法简洁易用,可同时传递多个字符型参数
URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较不会性能损失;

2、url传参:

//    ==========跳转带参数===========
   function go() {
       window.location.href='sec.html?name=han&type=2333&师爷=什么是特么的惊喜'
   }

3、localstorge传参:

    //==========localstorge参=======
   function go() {
       location.href='sec.html';

       localStorage.name = 'han9999999999';
       localStorage.type = 666666666666666;

       var myObj = {
           big:999,
           normal:555,
           small:111
       };
//
       localStorage.myObj = myObj;

       localStorage.myObj = JSON.stringify(myObj);
   }

4、localstorge接受参数:

//                    传对象~~~
                   console.log(localStorage.myObj);
                   console.log(typeof (localStorage.myObj));
//
                   console.log(JSON.parse(localStorage.myObj));

5、cookie传参:

//    =============参========
   function go() {
       document.cookie = {name:'han',type:222};
       location.href='sec.html';


   }

6、kookie接受参数:

coooookie
   var x = document.cookie;
   console.log(typeof x)
   console.log(x);

7、关于angular通过路由传参:

第一步:

在html中确定在哪里点击跳转传参:(参数的出发点)

<a type="button" ng-click="tooo(listId)">编辑</a>

第二步:(参数的出发点)

路由中添加参数:(url后边的/:listID就是参数部分,listId是参数,之前的都是固定写法 ,不必纠结,带上参数就行了)

.state('backstage.editArticle',{
   url: '/editArticle/:listId',       //路由参!!!!
   templateUrl: 'editArticle.html'
})

第三步:(参数的出发点)

控制器中写跳转函数并带参:(注意尖括号部分即是参数)

//示例 参-------------!!!!!!!!!
$scope.tooo = function (listId) {
   $state.go('backstage.editArticle', {listId:77777})
};

第四步:(参数的目的点)

就可以在跳转的页面看到参数并获取:

$scope.aa =  $stateParams.listId;                //使用$stateParams接受
console.log($scope.aa);

此处需要注意要把$stateParams参数添加到function的参数中去:完整的应该是:

//=====>editArticle 面 控制器(!!!目的页面!!!)
myApp.controller('editArticleCtrl',function ($scope,$http,$stateParams) {
   $scope.aa =  $stateParams.listId;                //使用$stateParams接受
   console.log($scope.aa);
});



以上




返回列表 返回列表
评论

    分享到