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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
小程序关于请求同步的总结
May 05 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
基于Vue实现电商SKU组合算法问题
May 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
php模板中出现空行解决方法
2011/03/08 PHP
php多重接口的实现方法
2015/06/20 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
jQuery 解析xml文件
2009/08/09 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
python中format()函数的简单使用教程
2018/03/14 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
解决python3输入的坑——input()
2020/12/05 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
简短证婚人证婚词
2014/01/09 职场文书
给客户的道歉信
2014/01/13 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书