关于本地存储的学习与应用

引入

　　自从HTML5的出现，为前端开发带来了诸多便利。在以前我们常常用cookie来实现一些想要达到的需求，但是cookie有很多限制性的条件，比如存储大小，有过期时间，需要在服务器环境下，自己要写辅助函数才能实现cookie存储等。HTML5就为我们带来了本地存储，解决了cookie出现的限制条件。

　　HTML5中存在很多存储形式：

• 本地存储(localstorage && sessionstorage)　　
• 离线缓存
• IndexedDB和Web SQL

    但如今比较常用的应该属本地存储了，下面我们来介绍一下本地存储

　

本地存储(Web storage)简介

　　- 本地存储于cookie的区别

　Web storage之所以能火起来，是因为它本身就有与cookie类似的功能而优于cookie地方，下面说一下Web storage与cookie的一些显著区别

 

	Web storage	cookie
容量	5MB	4KB
过期时间	没有过期时间	有过期时间
服务器	在本地	会随请求发往服务器
方法	现成的方法	需要自己封装方法

   

   　- Web storage的兼容性

 

　　　　　　

 

本地存储分类

     - storage类型

　　storage类型提供最大的存储空间（因浏览器而异）来存储名值对儿。

      storage类型只能存储字符串，非字符串的数据在存储之前会被转化成字符串。

      storage又分为localstorage和sessionstorage两种实例，这两个实例都存在以下方法：

• .name = value                为指定的name设置对应value  
• .setItem(name,value)    为指定的name设置对应value
• .getItem(name)             根据指定的name获取值
• .removeItem(name)      删除由name指定的名值对儿
• .key(index)                    获得index处的值的名字

    

     - sessionStorage  

　　sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

    基本用法：

　  //设置
    window.sessionStorage.aaa= "hello,I'm sessionStorage";
    window.sessionStorage.setItem('skq','大美女');
    //获取
    var hello = window.sessionStorage.aaa;
    //删除
    window.sessionStorage.removeItem('skq');
    //清除所有    
    window.sessionStorage.clear();

 

　　- localStorage

　localStorage 方法存储的数据没有时间限制

　　基本用法：

    //设置
    window.localStorage.aaa= "hello,I'm localStorage";
    window.localStorage.setItem('skq','大美女');
    //获取
    var hello = window.localStorage.aaa;
    //删除
    window.localStorage.removeItem('skq');
    //清除所有    
    window.localStorage.clear();

 

      配合用法：

       　　localstorage常常与JSON.parse()、JSON.stringify()配合使用：

• JSON.parse()       将字符串转化为对象
• JSON.stringify()  将对象转化为字符串　　　　　

    <script type="text/javascript">
    var person = {
        'name':'葫芦娃',
        'age':21,
        'sex':'female'
    }

    localStorage.setItem('huluwa',JSON.stringify(person));      //将对象转换为字符串
    var name = JSON.parse(localStorage.getItem('huluwa')).name; //取出字符串转换为对象，然后取值
    alert(name);
    </script>

　　

localStorage插件

     store.js       

 优点 

•  LocalStorage 只能存储字符串，store.js 在存取的时候会自动 stringify、parse。
•  store.js 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。 

　　

　　参考资料：

　　http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html#m2