localStorage使用

1、HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储
  

不同用户登录在同一个浏览器登录，缓存没有清除。所以这些适用于一些需要内容不是很重要的缓存。

2、localStorage 和sessionStorage：

• 高版本浏览器兼容

• localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
  
  
• 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
  
  
• localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
  
  
• sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
  
  
• 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
• 存储空间大致在5M左右，各大浏览器略有差别

3、API

localStorage. length:返回现在已经存储的变量数目。
localStorage. key(n):返回第n个变量的键值(key)。
localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。
localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值，无返回值。
localStorage.removeItem(k):删除键值为k的变量。
localStorage.clear():清空所有变量。

4、example

以页面表单编辑为例：

当表单内容有变化（change）时，会将变化的内容缓存在localStorage中

适用场景：跳转到下一页再返回的时候，之前编辑的内容还在

/* 
* 当表单中的值改变时，保存在localStorage中
*/
$("input[type=text],select").change(function(){ 
    $this = $(this); 
    localStorage[$this.attr("name")] = $this.val(); 
    console.log(localStorage);
});
$("input[type=checkbox]").change(function(){ 
    $this = $(this); 
    localStorage[$this.attr("name")] = $this.attr("checked"); 
    console.log(localStorage);
});  
/* 
 * 读出localStorage中的值 
*/
if (localStorage.platformType) { 
    $("#platformType").val(localStorage.platformType); 
} 
if (localStorage.funcAuth) { 
    $("#funcAuth").val(localStorage.funcAuth); 
} 
if (localStorage.dataAuthType) { 
    $("#dataAuthType").val(localStorage.dataAuthType); 
} 
/* 
 * 如果表单提交，则调用clear方法 
 */
$("form").submit(function() {
    //localStorage.clear(); 
});

5、调试

1、通过控制台console直接调试

2、F12    Application可以找到Local Storage