push()在javascript中不起作用
push() not working in javascript
问题:控制台中的Uncaught TypeError: Object #<Object> has no method 'push'
。
代码在http://jsfiddle.net
更改存储项目id(Cart)并重试,看起来"Cart"id下以前存储的项目不是注释部分中建议的@dc5的json数组
UPD:试试这个http://jsfiddle.net/vJkBQ/4/
HTML
<div id='cart'></div>
<input type="button" id="add" value="Add To Cart item 1" />
<input type="button" id="add2" value="Add To Cart item 2" />
Javascript
//TODO: move from globals
var storageName = 'myCART';
$(document).ready(function () {
var item = {
DepartmentID :333,
CategoryID:117,
BrandID:19,
BrandImage:" ",
BrandName:"General",
ID:711
};
var item2 = {
DepartmentID :123,
CategoryID:321,
BrandID:18,
BrandImage:" ",
BrandName:"Common",
ID:712
};
localStorage.clear(storageName);
$('#add').click(function(){
addToCart(item);
});
$('#add2').click(function(){
addToCart(item2);
});
});
function addToCart(item){
//by @slebetman
var items = JSON.parse(localStorage.getItem(storageName));
if (! (items instanceof Array) ) {
items = [];
}
var itemIndex = getItemIndexById(items, item.ID);
if(typeof(itemIndex) === 'number'){
items[itemIndex].quantity++;
}
else{
item.quantity = 1;
items.push(item);
}
localStorage.setItem(storageName, JSON.stringify(items));
console.log(localStorage.getItem(storageName));
}
//find search item index
function getItemIndexById(items, id){
for(var i = 0; i < items.length; i++){
if(items[i].ID == id){
return i;
}
}
return false;
}
表达式:
JSON.parse(localStorage.getItem(storageName))
很可能没有返回数组。在这种情况下,声明:
var oldStorage = JSON.parse(localStorage.getItem(storageName)) || [];
不足。
你应该做的是这样的事情:
var oldStorage = JSON.parse(localStorage.getItem(storageName));
if (! (oldStorage instanceof Array) ) {
oldStorage = [];
}
这是一种检测阵列的简单方法。有更先进的方法,如检查.length
的存在等,可以检测数组和类数组对象,以及在数组对象已被覆盖或跨iframe工作的情况下检测数组。
附加答案:
您已经对代码进行了大量更改,但问题仍然存在。线路:
if (items != null) {
不足以检查项是否为数组。你应该改为:
if ( items instanceof Array ) {
以确保它确实是一个数组。
此外,在其他块中:
}else{
console.log('Cart is empty, preparing new cart array');
items.push(item);
console.log
消息表示正在准备一个新阵列。然而,这是因为代码没有初始化新的数组,而是将items
变量当作数组来使用。你应该这样做:
}else{
console.log('Cart is empty, preparing new cart array');
items = [];
items.push(item);
警告:
然而,在这之后,请注意评论我的问题。如果你从头开始写这整件事,那么做我建议的事情会解决你所有的问题。但是,如果你正在修改别人的代码,那么Cart
的存储格式很可能与你预期的不同。
请先执行console.log(localStorage['Cart'])
,然后再致电JSON.parse
,并在此处发布您的结果。问题出在浏览器上的本地存储上,通常无法在其他人的机器上复制。
是否进行
JSON.parse(localStorage.getItem(storageName))
总是返回一个数组?如果是这样的话,问题是并不是所有的浏览器都支持push方法。你可以添加使用这个片段添加它,如果它是丢失的:
if(!Array.prototype.push){
Array.prototype.push=function(x){
this[this.length]=x;
return true
}
};
这段代码只是一个开始,你肯定可以改进它
您可以使用。您可以使用call()
在对象上调用Array.prototype.push()
。
JSFiddle
JavaScript
function appendToStorage(storageName, data){
var oldStorage = JSON.parse(localStorage.getItem(storageName)) || [];
Array.prototype.push.call(oldStorage, data);
localStorage.setItem(storageName,JSON.stringify(oldStorage));
}
JSON.parse
返回一个对象或null
。所以在这里你不知道你有一个对象还是一个数组。
JSON.parse(localStorage.getItem(storageName)) || [];
你可以用这个代替:
function appendToStorage(storageName, data){
var oldStorage = JSON.parse(localStorage.getItem(storageName)) || {};
if (oldStorage != null){
$(oldStorage).extend(data);
localStorage.setItem(storageName,JSON.stringify(oldStorage));
}
}
$extend()会将您的项目添加到另一个JSON对象中。此处信息
您的"item"不是一个数组,您不能对它使用推送方法。
对象没有"push"方法,可以这样做!
function appendToStorage( storageName, data ) {
var oldStorage = JSON.parse( localStorage.getItem( storageName ) ) || {},
push = Array.prototype.push;
push.call( oldStorage, data );
// oldStorage.data = data;
localStorage.setItem(storageName,JSON.stringify(oldStorage));
}
- 为什么这个 .push 不起作用?(JavaScript)
- document.createelement不起作用(javascript)
- Chrome 中表格的 CSV 导出不起作用 - JavaScript/AngularJS
- 如果语句不起作用 - JavaScript
- 为什么我的动态更改链接不起作用?(Javascript)
- RPS 函数不起作用(JavaScript)
- 计时器间隔不起作用 Javascript
- 通过返回 false - 不起作用(javascript)来阻止链接打开
- Eval 不起作用 - JavaScript
- Android 浏览器 .click() 不起作用 javascript
- 为什么这段代码不起作用?Javascript
- jsFiddle显示正确,但一旦在本地运行就不起作用(Javascript)
- 带有html的Navigator不起作用javascript
- 从文本文件中提取内容不起作用 JavaScript
- 从查询字符串中获取参数;不起作用..Javascript
- regex手机验证不起作用-javascript
- if和else语句不起作用(javascript)(html)
- 更改字体大小的复选框不起作用-Javascript
- 为什么这个基本的 if 语句不起作用?JavaScript
- Timer 不起作用/ JavaScript/ innerHTML null