脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularJs中json数据转换与本地存储

angularJs中json数据转换与本地存储的实例

 更新时间：2018年10月08日 14:19:54   作者：泠泠在路上  
今天小编就为大家分享一篇angularJs中json数据转换与本地存储的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1.html:把json对象转换成json字符串

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
 <div ng-app="module" ng-controller="ctrl">
 {{data}}
 </div>
 <script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  $scope.data = {'name': '泠泠在路上'};
  //把json对象转换成json字符串
  localStorage.setItem('data', angular.toJson($scope.data));
 }]);
 </script>
</body>
</html>

2.html:字符串转换成json对象

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 {{data.name}}
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  //alert出字符串
  alert(localStorage.getItem('data'));
  //字符串转换成json对象
  $scope.data =angular.fromJson(localStorage.getItem('data'));
 }]);
</script>
</body>
</html>

3.html字符串转换成json对象

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 {{data.username}}
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
 //字符串转换成json对象
  $scope.data = angular.fromJson('{"username":"泠泠在路上"}');
 }]);
</script>
</body>
</html>

以上这篇angularJs中json数据转换与本地存储的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • AngularJS入门教程之服务(Service)

    AngularJS入门教程之服务(Service)

    本文主要介绍 AngularJS Service,这里整理了AngularJS Servic的详细资料,并提供代码实例,有需要的小伙伴可以参考下
    2016-07-07
  • 详解使用KeyValueDiffers检测Angular对象的变化

    详解使用KeyValueDiffers检测Angular对象的变化

    这篇文章主要为大家介绍了KeyValueDiffers检测Angular对象的变化使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • ui-router中使用ocLazyLoad和resolve的具体方法

    ui-router中使用ocLazyLoad和resolve的具体方法

    这篇文章主要介绍了ui-router中使用ocLazyLoad和resolve的具体方法，详细的介绍了ocLazyLoad和resolve的具体用法，非常具有实用价值，需要的朋友可以参考下
    2017-10-10
  • 浅谈Angular单元测试总结

    浅谈Angular单元测试总结

    这篇文章主要介绍了浅谈Angular单元测试总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖

    详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖

    本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • 如何利用AngularJS打造一款简单Web应用

    如何利用AngularJS打造一款简单Web应用

    如果大家希望在应用程序的创建工作中采取各类最佳实践，那么AngularJS也能够带来极大的助益。总而言之，这套框架的强大功能与特性永远不会让有着应用开发需求的朋友们失望
    2015-12-12
  • Angular如何由模板生成DOM树的方法

    Angular如何由模板生成DOM树的方法

    这篇文章主要介绍了Angular如何由模板生成DOM树的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 基于AngularJS的拖拽文件上传的实例代码

    基于AngularJS的拖拽文件上传的实例代码

    本篇文章主要介绍了基于AngularJS的拖拽上传的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Angularjs实现控制器之间通信方式实例总结

    Angularjs实现控制器之间通信方式实例总结

    这篇文章主要介绍了Angularjs实现控制器之间通信方式,结合实例形式总结分析了AngularJS控制器常用通信方式及相关操作注意事项,需要的朋友可以参考下
    2018-03-03
  • AngularJS入门教程之路由机制ngRoute实例分析

    AngularJS入门教程之路由机制ngRoute实例分析

    这篇文章主要介绍了AngularJS入门教程之路由机制ngRoute,结合实例形式分析了AngularJS路由机制的原理、ngRoute的组成、配置、参数与相关使用技巧,需要的朋友可以参考下
    2016-12-12

最新评论