Скрытая HTML-таблица для хранения данных

Question

Я создал одностраничное веб-приложение, которое манипулирует набором данных:

• от 2000 до 3000 элементов
• каждый элемент имеет одинаковые свойства: штат, город, улица,Почтовый индекс

В настоящее время я получаю данные через AJAX и сохраняю их в массиве объектов (каждый элемент массива является объектом с ключом / значением для State, City, Street, Zip code).

Я подумываю изменить свой код, чтобы вместо этого сохранить свои элементы в скрытой html-таблице:

• одна строка на элемент
• один столбец на свойство (штат, город, Улица, почтовый индекс)

Основное преимущество, которое я вижу: когда они работают вне офиса, пользователи могут сохранять мою страницу для работы в автономном режиме, поскольку скрытая таблица является частью DOM.

Таблица также является удобным форматом, все браузеры понимают ее (мне нужно поддерживать IE 7), и каждая ячейка легко доступна по ее координатам (row [i] .cells [j]).

Я немного обеспокоен производительностью для обхода DOM, но я думаю,Если бы я мог отсоединить таблицу от DOM и прикрепить ее только тогда, когда пользователи сохранят страницу.

Я что-то упустил?Есть ли в моем случае причина, по которой использование скрытой таблицы для хранения данных не было бы хорошей идеей?

Answer 1

Используйте JSON. На сегодняшний день это самый эффективный и быстрый способ доступа к данным на клиенте. Обход DOM с использованием таблицы будет на порядок медленнее. Вы можете легко сохранить данные JSON в виде текстового блога в любой базе данных или в любой системе хранения.

Фреймворк EXT.js широко использует JSON, и я считаю, что он является отличным инструментом для работы.

Answer 2

Если вы используете .NET, вы можете поместить это в заголовок страницы с литералом.

JSON при загрузке страницы

<script type="text/javascript">

    var table1 = [      
    // First Row
    {"Column1" : "Col1Data", 
      "Column2" : "Col2Data",
     "Column3" : "Col3Data" },

    // Second Row
    {"Column1"  : "Col1Data",  
     "Column2" : "Col2Data",
     "Column3" : "Col3Data" }
     ]

</script>

Затем вы можете получить доступ к данным с помощью:

table1[rowNum].ColumnName;