写在前面的话：

在HtML5中客户端提供了两种存储数据的对象，分别是以下两个：

1.localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

2.sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage 和sessionStorage 的常用方法

这两个对象的方法是相同的，这是就以localStorage对象为例子

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

举一个实战的小例子：

用localStorage方法来做一个搜索框记忆之前搜索过的内容用datalist标签展示在搜索框下面：

UI如下：

 附上源码：

    
        "searchHistory" type="text" id="search" />"search()">搜索
        
        
    

验证学习是否有效的途径是会将知识用于实践，加油！