Guardar un array de datos con LocalStorage HTML JavaScript ordenar con sort

[Jdel]

Hola a todos: tengo un código para almacenar datos en local storage, funciona bien, pero quiero que cuando se ingresen nuevos datos para almacenar, los muestre ordenados alfabéticamente, he leído que utilizando sorto para arrays se puede, pero no sé como insertarlo en el código que tengo.

Envío código a continuación

Mil gracias y saludos cordiales

Jdel

Código: [Seleccionar]

$(function(){
//verificamos si el navegador soporta localStorage
if(!localStorage){
setTimeout(function(){
alert('Disculpe, pero su navegador no soporta localStorage.'+
'No podrá utilizar este servicio de agenda :(');
});
}

$.mostrarListaDeContactos=function(){
//guardamos en una variable la cantidad de contactos y el cuerpo de la
//tabla en la que mostraremos la lista (agregando filas con jQuery)
var iTotalContactos=localStorage.length,
$objCuerpoTablaContactos=$('#tblTablaContactos').find('tbody');

//vaciamos el cuerpo de la tabla
$objCuerpoTablaContactos.empty();

//hay contactos almacenados?
if(iTotalContactos>0){
//recorremos la lista de contactos (los items almacenados en localStorage)
for(var iContacto=0; iContacto<iTotalContactos; iContacto++){
//guardamos en variables el telefono y nombre recuperados del localStorage
var strTelefono=localStorage.key(iContacto),
strNombre=localStorage.getItem(localStorage.key(iContacto));

//agregamos una nueva fila con los datos del contacto
$objCuerpoTablaContactos.append(
$('<tr>').append(
$('<td>',{ //fila con el nombre del contacto
text : strNombre,
align : 'left'
}),
$('<td>',{ //fila con el numero de telefono
text : strTelefono,
align : 'left'
}),
$('<td>',{ //fila para el boton de eliminar
align : 'center',
width : 60
}).append(
//agregamos a la fila el boton
$('<input>',{
type : 'button',
class : 'clsEliminarContacto',
value : 'Eliminar',
}).data('contactoAEliminar',strTelefono) //por medio del metodo
//data almacenamos en el boton el numero que debemos eliminar
//(esto no sera visible, es un truquillo interesante)
)
)
);
}
//no hay contactos almacenados
}else{
//agregamos una fila con un mensaje indicando que no hay contactos
$objCuerpoTablaContactos.append(
$('<tr>').append(
$('<td>',{
text : 'No se han agregado datos',
colspan : 3,
align : 'center'
})
)
);
}
};

//funcion para limpiar los campos del formulario
$.limpiarCamposDelFormulario=function(){
//vaciamos el contenido de los campos de texto
$('#txtNombre,#txtTelefono').val('');
//enfocamos el campo para digitar el nombre
$('#txtNombre').focus();
};

//evento submit del formulario
$('#frmAgregarContacto').on('submit',function(eEvento){
//evitamos que el form se envie (para que no recargue la pagina)
eEvento.preventDefault();

//obtenemos una "copia" de los campos de texto
var $txtTelefono=$('#txtTelefono'),$txtNombre=$('#txtNombre');

//verificamos que los datos no esten vacios
//con $.trim() eliminamos los espacios al final y al inicio de las cadenas
if($.trim($txtNombre.val())!='' && $.trim($txtTelefono.val())){
//creamos dos variables con el nombre y telefono que vamos a guardar
var strNombre=$.trim($txtNombre.val()),
strTelefono=$.trim($txtTelefono.val());

//preguntamos si el numero de telefono ya existe
if(localStorage.getItem(strTelefono)){
//el numero existe... desea actualizar?
if(confirm('El número de teléfono ya existe ¿Desea actualizarlo?')){
//actualizamos
localStorage.setItem(strTelefono,strNombre);
//cargamos en el cuerpo de la tabla la lista de contactos
$.mostrarListaDeContactos();
//limpiamos el formulario
$.limpiarCamposDelFormulario();
}
//el numero no existe
}else{
//agregamos el contacto al localStorage
localStorage.setItem(strTelefono,strNombre);
//cargamos en el cuerpo de la tabla la lista de contactos
$.mostrarListaDeContactos();
//limpiamos el formulario
$.limpiarCamposDelFormulario();
}
}else{ //en caso de que algun campo este vacio
//verificamos si el nombre esta vacio
if($.trim($txtNombre.val())==''){
//mostramos un mensaje
alert('Por favor, digite el nombre del contacto.');
//enfocamos el campo para el nombre
$txtNombre.val('').focus();
//verificamos si el telefono esta vacio
}else{
//mostramos un mensaje
alert('Por favor, digite el número del contacto.');
//enfocamos el campo para el telefono
$txtTelefono.val('').focus();
}
}
});

//clic en el boton para eliminar un contacto
//se usa live en vez de on, porque el boton se creo en tiempo de ejecucion
$('.clsEliminarContacto').live('click',function(){
//obtenemos el contacto que se va a eliminar (recordar que esta almacenado en data)
var strTelefonoAEliminar=$(this).data('contactoAEliminar');

if(confirm('¿Desea eliminar el dato seleccionado?')){
//eliminamos el contacto usando la clave que esta asociada al nombre
//recordemos que el item se guardo usando como clave el telefono
localStorage.removeItem(strTelefonoAEliminar);
//cargamos en el cuerpo de la tabla la lista de contactos
$.mostrarListaDeContactos();
}
});

//cuando la pagina carga mostramos la lista de contactos
//ojo: esto se hace al inicio...
$.mostrarListaDeContactos();
});

[Ogramar]

Hola ordenar por orden alfabético con JavaScript básicamente a partir de un array de nombres se hace con sort:

var fruits = ["Platano", "Naranja", "Almendra", "Manzana", "Mango"];
fruits.sort();

Después de aplicar sort ya tenemos los nombres ordenados:

Almendra, Mango, Manzana, Naranja, Platano

Si necesitas preparar los textos (por ejemplo pasar a mayúsculas o minúsculas, etc.) aquí tienes una referencia: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Salu2

[Jdel]

Ante todo muchas gracias por tu respuesta.
Luego decirte que no domino bien estos códigos, entonces hago dos preguntas:
1) El código del ejemplo mío es  un formulario en el cual se irán ingresando datos, entre ellos un "nombre", no sé de antemano que nombre se ingresará, por lo tanto no puedo colocarlo en el código como colocas en el ejemplo.
2) En el caso que tu código fuese el que yo necesito, donde tengo que incluirlo.
Nuevamente agradecido.
Jdel

[Ogramar]

Hola lo más normal si se tiene un formulario es ir almacenando los datos en la base de datos por ejemplo usando php. Si no los almacenas en la base de datos, todo lo que haya introducido el usuario se podría perder en algún momento. Aquí hay una referencia de php, http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193

Si por motivos de algún tipo se prefiere almacenar usando localStorage puedes trasladar variables JavaScript a LocalStorage y viceversa como se muestra en el siguiente ejemplo:

Código: [Seleccionar]

<html>
<head>

<script type="text/javascript">
function ejecutame(){
alert ("ejecutando");
// Creating an example of JSON
var session = {
  'screens': [],
  'state': true
};
session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 });
session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 });
session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 });
session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 });
session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 });
session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 });

// Converting the JSON string with JSON.stringify()
// then saving with localStorage in the name of session
localStorage.setItem('session', JSON.stringify(session));

// Example of how to transform the String generated through
// JSON.stringify() and saved in localStorage in JSON object again
var restoredSession = JSON.parse(localStorage.getItem('session'));

// Now restoredSession variable contains the object that was saved
// in localStorage
console.log(restoredSession);
console.log("Podemos acceder a un dato guardado pantalla indice 4 nombre: "+restoredSession.screens[4].name.toString());
console.log("Podemos acceder a un dato guardado pantalla indice 4 ancho: "+restoredSession.screens[4].width.toString());
console.log("Podemos acceder a un dato guardado pantalla indice 4 alto: "+restoredSession.screens[4].height.toString());
}
</script>

</head>
<body onload="ejecutame()">
Hola
</body>

</html>

Salu2

[Jdel]

Agradecido estoy por tu respuesta. La leeré con detenimiento para saber si es lo que necesito.
Hasta la próxima consulta y saludos cordiales.
Jdel