tr>

table>

displayData();

var button = document.getElementsByTagName('button');

for(var i = 0; i

button [i] .onclick = handleButtonPress;

var value = document.getElementById('value')。value;

localStorage.setItem(key，value);

休息;

案例'clear'：

localStorage.clear();

休息;

}

displayData();

}

函数displayData(){

var tableElement = document.getElementById('data');

tableElement.innerHTML ='';

var itemCount = localStorage.length;

document.getElementById('count')。innerHTML = itemCount;

for(var i = 0; i

var key = localStorage.key(i);

var val = localStorage.getItem(key);

tableElement.innerHTML + ='

html>

浏览器不能删除我们通过localStorage的创建的数据，除非用户删除它。

2.监听存储事件

通过本地存储存储的数据对同源的文档具有可见性，比如你打开两个镀铬浏览器访问同一个URL地址，在任何一个页面上创建的本地存储对另外一个页面也是可见的。但是如果用别的浏览器(如firefox)打开相同的网址地址，本地存储是不可见的，因为他们不同源了。来监听存储的内容发生改变的，下面我们看他包含的其他属性：

key：返回发生改变的键值；

oldValue：返回发生改变键值以前的值值；

newValue：返回发生改变键值新的值值；

网址：发生改变的URL地址;

storageArea：返回发生改变的存储对象(是本地存储还是会话存储)

下面我们看个例子：

复制代码代码如下：

存储空间 title>

表{边界折叠：折叠；}

th，td {填充：4px；}

style>

head>

行+ ='

行+ ='

行+ ='

行+ ='

行+ ='

tableElement.innerHTML + =行;

}

script>

body>

html>

我们在例1中增删改改存储的数据，会在例2页面上显示出来。例2在chrome浏览器中运行正常，firefox没有反应，其他浏览器没有测试。

运行结果：

3.使用session storage

session storage在使用上和本地存储一样，只是他的访问性上只进入内部页面，并且页面关闭后会消失，我们通过sessionStorage来访问它。

复制代码代码如下：

示例 title>

body> * {float：left;}

table {border-collapse：塌陷; margin-left：50px;}

th，td { padding：4px;}

th {text-align：right;}

输入{border：细实黑色； padding：2px;}

标签{min-width：50px; display：inline-block; text-align：right;}

#countmsg ，#buttons {margin-left：50px; margin-top：5px; margin-bottom：5px;}

style>

head>