我正在创建数组并将其存储在localStorage
中,我想使用for
循环将数组解析为容器内的单独divs
。这是我到目前为止的内容:
var arr = ['item 1', 'item 2', 'item 3'];
window.localStorage.setItem('myArr', JSON.stringify(arr));
function populateContainer() {
var newArr = window.localStorage.getItem('myArr');
$('.container').html('');
for (var i = 0, len = newArr.length; i < len; i++) {
$('.container').append('<div>' + newArr[i] + '</div>');
}
}
populateContainer();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
不幸的是,这是为数组项的每个字符创建一个单独的div
,所以我最终得到18 divs
,每个字符一个,而不是3 divs
与3个数组项。抱歉,该代码段无法正常运行,显然不支持localStorage
?
答案 0 :(得分:1)
您已将JSON正确存储在localStorage
中,但在检索它时还需要将parse()
退回:
var arr = JSON.parse(window.localStorage.getItem('myArr'));
答案 1 :(得分:1)
遍历JSON时,您需要再次解析JSON,因为您将数组另存为字符串:
var arr = ['item 1', 'item 2', 'item 3'];
window.localStorage.setItem('myArr', JSON.stringify(arr));
function populateContainer() {
var arr = JSON.parse(window.localStorage.getItem('myArr'));
$('.container').html('');
for (var i = 0, len = arr.length; i < len; i++) {
$('.container').append('<div>' + arr[i] + '</div>');
}
}
populateContainer();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
JSFiddle,因为localStorage在这里不起作用:https://jsfiddle.net/45h3fn0a/1/
答案 2 :(得分:1)
如果您使用JSON.stringify()
来存储数据,则必须使用JSON.parse()
将其恢复为数组,如下所示:
var arr = ['item 1', 'item 2', 'item 3'];
window.localStorage.setItem('myArr', JSON.stringify(arr));
function populateContainer() {
var newArr = JSON.parse(window.localStorage.getItem('myArr'));
$('.container').html('');
for (var i = 0, len = newArr.length; i < len; i++) {
$('.container').append('<div>' + newArr[i] + '</div>');
}
}
populateContainer();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>