Javascript-форум - Ошибка в скрипте!

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" type="image/x-icon">
<link rel="stylesheet" href="" type="text/css"/>
 <title>mail</title>
 </head>
	 <body> 


<input type="button" onClick="mail(index)" value="Ok">
<hr>
<span id="mail"></span>

<script> 
var index = 0;
 function mail()
 { 
index++; 

M=document.getElementById('mail').innerHTML;
var k = prompt("Сообщение:", ""); 

if (k==null || k=="")
{
k="@";
}
var msg = "<span id='q" + index + "'>" + k + "</span>" + " <input type='button' value='ред.' onClick='R(" + index + ")'><hr>";

document.getElementById("mail").innerHTML=msg+M;
save();
} 
</script> 

<script> 
function R(index) 
{ 
k = document.getElementById('q' + index); 
var txt = prompt("Редактировать:", k.innerHTML);

if (txt==null || txt=="")
{
txt="@";
}

k.innerHTML = txt; 
save();
} 
</script> 


<script>
document.addEventListener("DOMContentLoaded",
function save_loading()
{ 
var q = sessionStorage.getItem("TEXT");
document.getElementById("mail").innerHTML=q;
});
</script>


<script> 
function save()
{ 
var q=document.getElementById('mail').innerHTML;
sessionStorage.setItem("TEXT", q);
} 
</script> 


</body>
 </html>

проблема такая:
запускаю фаил всё работает,
пишу текст допустим:
id=q1 допустим 1
id=q2 допустим 2
id=q3 допустим 3
всё вроде работает,но если внесу изменения в фаил и зайду обновлю, текст останется,но index пропадает :(
как сохранить index или сделать,чтоб он не пропадал при внесении изменений в код
изменения вношу не глабальные,допустим поменяю название кнопки
----------------------------------------
есть такое предложение:

loading => загружаем
{
var i = localStorage.getItem("index");
index=i;
}
save => сохраняем
{
var i=index;
localStorage.setItem("index", i);
}
НО! не работает (
-----------------------------------------