使用sessionStorage中的值切換按鈕
[英]Toggle button with value from sessionStorage
問題描述
我有一個小的切換按鈕，我將值（true或false）存儲到sessionStorage，並且在頁面加載時，如果該值存在於sessionStorage中，我將其取值並根據值顯示切換按鈕，並且根據該值，我顯示不同的值我的angularjs頁面上的內容。
問題是，我將一個值存儲到sessionStorage，然后再次調用該值，但是我的切換按鈕和ng-if語句沒有得到此值。 這是下面的代碼。
問題是，為什么，為什么不能在ng-if語句中使用它？ （在我的小提琴中，我使用ng-show，因為ng-if在此示例中不起作用）
var app = angular.module("ap", []); app.controller("con", function($scope) { if (sessionStorage.getItem("modePreview")) { $scope.basicMode = sessionStorage.getItem("modePreview"); } else { $scope.basicMode = true; } $scope.sendModeValueToStorage = function() { sessionStorage.setItem( "modePreview", ($scope.basicMode = !$scope.basicMode) ); }; });
.activeSwitch, .inactiveSwitch { font-size: 26px; cursor: pointer; } i.activeSwitch { color: #e4e4e471; } i.inactiveSwitch { color: #e4e4e471; } .fontStyleUserControlPannel { font-size: 18px; font-weight: 600; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <body ng-app="ap" ng-controller="con"> Advanced mode <i class="fa fa-toggle-on fa-2x" ng-click="sendModeValueToStorage()" ng-class="{'fa-rotate-180' : basicMode}"></i> Basic mod <div ng-show="!basicMode"> <h3> Basic mode </h3> </div> <div ng-show="basicMode"> <h3> Advanced mode </h3> </div> </body>
1 個解決方案
解決方案1
1 已采納 2019-02-08 13:32:55
一些問題：
首先，您正在使用AngularJS 1.1.1版。 ng-if在1.1.5版之前的AngularJS中不存在。 因此，您需要更新AngularJS版本以使用ng-if 。
其次， sessionStorage只能接受字符串值。 因此，如果要將JS對象存儲在sessionStorage ，則必須將對象存儲為JSON.stringify() ，並在獲取它時使用JSON.parse() 。
最后，您的條件塊始終將$scope.basicMode設置為true ：
if (sessionStorage.getItem("modePreview")) { // if modePreview is true
$scope.basicMode = sessionStorage.getItem("modePreview"); // set basicMode to true
} else { // otherwise, still set basicMode to true?
$scope.basicMode = true;
}
我認為您希望else語句為$scope.basicMode = false ，對嗎？
更新的工作提琴： https : //jsfiddle.net/zx02f1yv/
從sessionStorage JavaScript刪除值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.