Кнопка переключения со значением из 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Несколько вопросов:
Во-первых, в вашей скрипке вы используете AngularJS версии 1.1.1. ng-if не существовало в AngularJS до версии 1.1.5. Поэтому вам нужно обновить версию 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. я думаю, пришло время покинуть офис на этой неделе :D :D
Не за что, рад помочь :)
спс, обновил. Вы знаете, почему я не могу получить значение из хранилища сеансов в ng-if?