刷新后如何保持localStorage值？
Posted
技术标签:
【中文标题】刷新后如何保持localStorage值？【英文标题】：How to keep localStorage values after refresh? 【发布时间】：2017-11-17 18:54:22 【问题描述】：这是我的 ctrl：
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));但我不知道刷新后如何保持更新。
请指教。
谢谢。
【问题讨论】：
【参考方案1】：您的线路$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));
【讨论】：
我应该有这条线。我需要一些初始数据，因此这条线。 :) 那么你应该添加条件检查，看看是否没有数据然后只插入。 你还在吗？这有一个问题。 一个有趣的..你的答案不太正确，因为仍然有一个键'initData'只有一个空数组是一个值，也就是说，如果全部被删除:) 是的，它只会在应用程序第一次运行时插入。之后，当用户从 UI 中手动清除所有内容（使列表为空）时，我认为我们不应该重新插入数据。【参考方案2】：在每次页面加载时，您都在设置新的 initData 并更新本地存储...相反，您应该检查现有的本地存储数据并在使用模拟的 initData 之前使用它
【讨论】：
【参考方案3】：如果您的 localStorage 在加载时为空，您需要检查首先
if (localStorage == null) //setItem() ...;
【讨论】：
你的意思是if (localStorage == null) ;？ :)
是的！对不起错字；检查您的 localoStorage 是否不为空，如果它为空，则可以 setItem【参考方案4】：
使用 javascript 从本地存储中删除数据 这是您的代码，没有通过错误。
使用删除功能
function deleteRow(index)
dataList.splice(index, 1);
console.log('====>', dataList)
localStorage.setItem('items', JSON.stringify(dataList));
【讨论】：
最容易理解的dataList是数组，这里我的对象被推送了 items 是键名(databaseName)【参考方案5】：此代码将帮助您理解.....
<!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】：在简单的步骤中，您需要如何使用刷新功能来刷新页面，这对我来说很方便有效，并保持 locaStorage 值设置..我使用....下面的函数调用它作为 load() 和它对我有用
function load()
console.log("loading")
setTimeout("window.location.assign('samepage.html');", 1000);
【讨论】：
【参考方案7】：几个月来我一直面临同样的问题。最后我找到了解决方案。 （我不确定这对你来说是否是同样的问题，无论如何分享我的场景）
当我在本地主机上进行测试时，我使用 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/）
对于你的情况，重新加载页面后检查URL是否不同。如果是，修复它，你的问题可能不会持续
【讨论】：
以上是关于刷新后如何保持localStorage值？的主要内容，如果未能解决你的问题，请参考以下文章