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 iframe的相互操作浅析
Oct 14 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
微信小程序实现登录注册功能
Dec 29 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
session 的生命周期是多长
2006/10/09 PHP
实用函数5
2007/11/08 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python调用C++程序的方法详解
2017/01/24 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
个性婚礼策划方案
2014/05/17 职场文书
企业安全标语
2014/06/07 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
python垃圾回收机制原理分析
2022/04/13 Python