刷新后如何保留localStorage值？
[英]How to keep localStorage values after refresh?
問題描述
這是我的控制：
app.controller('ctrl', function ($window, $scope) {
$scope.initData = [
{
firstName: "John",
lastName: "Doe",
},
{
firstName: "Jane",
lastName: "Doe",
},
{
firstName: "John",
lastName: "Smith",
}
];
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
$scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
$scope.sortedType = 'firstName';
$scope.sortedReverse = false;
//Remove Rows and Update localStorage Key Values
$scope.removeRow = function(row) {
$scope.retrievedData.splice(row, 1);
$scope.initData.splice(row, 1);
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
});
HTML：
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
<span ng-show="sortedType == 'firstName' && sortedReverse" class="fa fa-long-arrow-up"></span>
<span ng-show="sortedType == 'firstName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
<span href="#" ng-click="sortedType = 'firstName'; sortedReverse = !sortedReverse" style="cursor:pointer;">First Name</span>
</th>
<th>
<span ng-show="sortedType == 'lastName' && sortedReverse" class="fa fa-long-arrow-up"></span>
<span ng-show="sortedType == 'lastName' && !sortedReverse" class="fa fa-long-arrow-down"></span>
<span href="#" ng-click="sortedType = 'lastName'; sortedReverse = !sortedReverse" style="cursor:pointer;">Last Name</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in retrievedData | orderBy: sortedType: sortedReverse">
<td>{{v.firstName}}</td>
<td>{{v.lastName}}</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-primary" ng-click="removeRow();">Delete</button>
</td>
</tr>
</tbody>
</table>
現在，我相信很清楚這是做什么的。 它將$scope.initData的數據分配給localStorage ，然后將其插入到 HTML 中。 函數removeRow()刪除表中的行並使用最新操作更新localStorage 。 問題在於，每次我重新加載 HTML 時，都會加載初始的localStorage數據，而不是更新的數據。 我知道這是因為我在這里分配它： $window.localStorage.setItem('initData', JSON.stringify($scope.initData)) ; 但我不知道如何在刷新后保持更新。
請指教。
謝謝。
7 個解決方案
解決方案1
8 2017-06-15 10:14:40
你的行$window.localStorage.setItem('initData', JSON.stringify($scope.initData)); 每次刷新都會重置數據。
用這個替換該行：
if(!localStorage.getItem('initData')){
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
更重要的是，你根本不應該有那條線。 從一個空的本地存儲開始，僅從 UI 添加新條目。
上面的代碼只運行一次，應用程序第一次運行。
如果您想在每次列表為空時重新插入數據，請嘗試以下操作
if(!localStorage.getItem('initData') || JSON.parse(localStorage.getItem('initData')).length === 0){
$window.localStorage.setItem('initData', JSON.stringify($scope.initData));
}
解決方案2
2 2017-06-15 10:15:14
在每個頁面加載時，您都在設置新的 initData 並更新本地存儲......相反，您應該檢查現有的 localstorage 數據並在使用模擬的 initData 之前使用它
解決方案3
1 2017-06-15 10:20:37
請先檢查您的localStorage是負載空
if (localStorage == null) {//setItem() ...};
解決方案4
1 2018-06-12 08:42:08
使用 JavaScript 從本地存儲中刪除數據這是您的代碼，沒有錯誤傳遞。
使用函數刪除
function deleteRow(index){
dataList.splice(index, 1);
console.log('====>', dataList)
localStorage.setItem('items', JSON.stringify(dataList));
}
解決方案5
0 2018-07-14 09:12:20
此代碼將幫助您理解......
<!DOCTYPE html>
<html>
<head>
<script>
var ArrayData = [];
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.count) {
localStorage.count = Number(localStorage.count)+1;
} else {
localStorage.count = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.count;
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
function load()
{
var odser = JSON.parse(localStorage.getItem("data"));
document.getElementById("result1").innerHTML = odser;
}
function fun()
{
var odser = JSON.parse(localStorage.getItem("data"));
ArrayData = odser;
ArrayData.push(3);
var oser = JSON.stringify(ArrayData);
localStorage.setItem("data", oser);
var odser = JSON.parse(localStorage.getItem("data"));
document.getElementById("result1").innerHTML = odser;
}
</script>
</head>
<body onload="load()">
<button onclick="clickCounter()" type="button">Click me!</button>
<button onclick="fun()" type="button">Click me! Array</button>
<div id="result"></div>
<div id="result1"></div>
</body>
</html>
解決方案6
0 2018-09-12 04:52:56
在簡單步驟中，您需要如何使用刷新函數來刷新頁面對我來說非常方便和有效，並保持 locaStorage 值設置..我
function load()
{
console.log("loading")
setTimeout("window.location.assign('samepage.html');", 1000);
}
解決方案7
0 2021-07-09 00:59:50
幾個月來我一直面臨同樣的問題。 最后我找到了解決方案。 （我不確定這對你來說是否是同樣的問題，無論如何分享我的場景）
當我在本地主機上進行測試時，我使用 URL 作為 http://localhost:3000/ 來加載頁面。 但是在登錄時，頁面刷新后，我實際上是使用IP地址來重定向頁面，就像http://192.163.1.31:3000/ 。
所以結果，http://localhost:3000/的本地存儲包含我保存的值，但http://192.163.1.31:3000/的本地存儲不包含我保存的值。
所以我通過在整個啟動過程中簡單地使用相同的 URL 來修復解決方案，直到頁面加載。 問題得到了解決。 （我使用http://192.163.1.31:3000/而不是 http://localhost:3000/）
對於您的情況，請檢查頁面重新加載后網址是否不同。如果是，請修復它，您的問題可能不會持續存在
如何在使用 localStorage 刷新頁面后保持活動選項卡？
[英]How do I keep the active tab after page refresh with localStorage?
使用localStorage刷新頁面后如何保持按鈕切換？
[英]How to Keep Button Toggled after Refresh the page using localStorage?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.