Добавление элементов в массив

[alex_wm]

Привет, подскажите, будьте любезны)
Хочу добавлять элементы в массив при каждом клике, при этом чтобы к элементу автоматически подставлялся ключ 1, 2, 3..

var arr = {};
var id = 1;
$('button').click(function() {
    var item = {};
    item['name'] = 'имя';
    item['image'] = 'изображение';
    arr = {id: item};
    id++;
});

Такая конструкция не срабатывает. Строится массив вида:

id:{name:имя, image: изображение}

а элементы не добавляются, а перезаписываются. Переменная массива id в массиве не читается как переменная. Заранее спасибо.

[laimas]

arr = {[id]: item};

[alex_wm]

Большое спасибо

[alex_wm]

Еще вопрос, хочу данный массив записать в local storage. Как вычислять последний ключ массива для того чтобы добавлять уникальное значение ключа?

var arr = {};
if(!isEmpty(localStorage.getItem('arr')) {
    var id = 1;
} else {
    // var id = ???
}
$('button').click(function() {
    var item = {};
    item['name'] = 'имя';
    item['image'] = 'изображение';
    arr = {[id]: item};
    localStorage.setItem('arr', JSON.stringify(arr));
    id++;
});

[alex_wm]

И еще - элемент новый не добавляется а перезаписывается

[laimas]

Math.max(...Object.keys(JSON.parse(localStorage.getItem('arr'))))+1

А как добавлять, если arr = {} всегда?

[laimas]

не добавляется а перезаписывается

arr = {[id]: item};

arr[id] = item;

[alex_wm]

arr = {[id]: item};

arr[id] = item;

Такая конструкция не работает
Выдает ошибку
Uncaught TypeError: Cannot set property '2' of null

[laimas]

<button>Add</button>
<pre></pre>
<script>
var arr = {}, id = 0;

document.querySelector('button').addEventListener('click', function() {
    var item = {time: Date.now()}
    arr[++id] = item;
    document.querySelector('pre').textContent = JSON.stringify(arr, null, '\t')
});
</script>

Работает? Что-то вы не так делаете.

[alex_wm]

[HTML run]<button>Add</button>
arr[++id] = item;

Я понял, такая конструкция работает только когда массив не пуст. Когда пуст - соответственно выдает ошибку