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


Posted in Javascript onOctober 08, 2018

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数据转换与本地存储的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
JS中验证整数和小数的正则表达式
Oct 08 #Javascript
webpack@v4升级踩坑(小结)
Oct 08 #Javascript
npm scripts 使用指南详解
Oct 08 #Javascript
webpack4.0 入门实践教程
Oct 08 #Javascript
vue实现一个炫酷的日历组件
Oct 08 #Javascript
angularJs利用$scope处理升降序的方法
Oct 08 #Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 #Javascript
You might like
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
道德之星事迹材料
2014/05/03 职场文书
管理标语大全
2014/06/24 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
单位实习介绍信
2015/05/05 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫