快捷導(dǎo)航

angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例

更新時(shí)間：2018年10月08日 14:19:54 作者：泠泠在路上

今天小編就為大家分享一篇angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1.html:把json對(duì)象轉(zhuǎn)換成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對(duì)象轉(zhuǎn)換成json字符串
  localStorage.setItem('data', angular.toJson($scope.data));
 }]);
 </script>
</body>
</html>

2.html:字符串轉(zhuǎn)換成json對(duì)象

<!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'));
  //字符串轉(zhuǎn)換成json對(duì)象
  $scope.data =angular.fromJson(localStorage.getItem('data'));
 }]);
</script>
</body>
</html>

3.html字符串轉(zhuǎn)換成json對(duì)象

<!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) {
 //字符串轉(zhuǎn)換成json對(duì)象
  $scope.data = angular.fromJson('{"username":"泠泠在路上"}');
 }]);
</script>
</body>
</html>

以上這篇angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲(chǔ)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS入門教程之服務(wù)(Service)
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細(xì)資料,并提供代碼實(shí)例,有需要的小伙伴可以參考下
2016-07-07
詳解使用KeyValueDiffers檢測(cè)Angular對(duì)象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測(cè)Angular對(duì)象的變化使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法，詳細(xì)的介紹了ocLazyLoad和resolve的具體用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
淺談Angular單元測(cè)試總結(jié)
這篇文章主要介紹了淺談Angular單元測(cè)試總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
詳解AngularJS通過(guò)ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴
本篇文章主要介紹了詳解AngularJS通過(guò)ocLazyLoad實(shí)現(xiàn)動(dòng)態(tài)（懶）加載模塊和依賴，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
如何利用AngularJS打造一款簡(jiǎn)單Web應(yīng)用
如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實(shí)踐，那么AngularJS也能夠帶來(lái)極大的助益?？偠灾?，這套框架的強(qiáng)大功能與特性永遠(yuǎn)不會(huì)讓有著應(yīng)用開發(fā)需求的朋友們失望
2015-12-12
Angular如何由模板生成DOM樹的方法
這篇文章主要介紹了Angular如何由模板生成DOM樹的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
基于AngularJS的拖拽文件上傳的實(shí)例代碼
本篇文章主要介紹了基于AngularJS的拖拽上傳的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-03-03
AngularJS入門教程之路由機(jī)制ngRoute實(shí)例分析
這篇文章主要介紹了AngularJS入門教程之路由機(jī)制ngRoute,結(jié)合實(shí)例形式分析了AngularJS路由機(jī)制的原理、ngRoute的組成、配置、參數(shù)與相關(guān)使用技巧,需要的朋友可以參考下
2016-12-12