HTML5本地存储

  1. HTML5为我们提供了在客户端存储数据的新方法

    web storage本地存储其中包含了 localStorage (一种没有时间限制的数据存储)和 sessionStorage (针对一个会话的数据存储)。


  2. 本地存储localStorage 和 sessionStorage 介绍

    localStorage 方法:存储的数据没有时间限制,除非手动删除。否则第二天、第二周或下一年之后,数据依然可用。

    sessionStorage 方法:针对一个 session 进行数据存储。在用户将浏览器窗口关闭后,数据将被清除。


  3. web storage 与 cookie 的差别

    在这之前,数据存储都是由cookie完成的。

    但是 cookie 不适合大量数据的存储,cookie 数据不能超过 4k ,同时因为每次http请求都会携带 cookie ,所以cookie 只适合保存很小的数据。同时因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

    并且使用 cookie 还需要我们自己去封装 setCookie 和 getCookie 方法。

    而在 web storage 中,虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。无论是 localStorage 还是 sessionStorage 都拥有自带的 setItemgetItemremoveItem 和 clear 等方法。

    所以在数据存储这一方面使用 web storage 毫无疑问是非常便利的。

    当然,这也并不是说 cookie 就没什么用,web storage 只能在客户端本地存储数据,如果需要与服务器端进行交互,那么 cookie 还是不可或缺的存在。

  4. web storage 的使用方法

    我在这就简单的介绍下,详细的方法可以查看 教程localStoragesessionStorage 的使用方法一样。

    存入数据:

    sessionStorage.setItem("myName","zhou");
    //第一种写法,setItem里有两个参数:前面的那个是我们存储的数据的名字,后面那个是存储的这个数据的值
    sessionStorage.myName="zhou";//第二种写法,直接使用 .+"数据名字"存储数据,"="后面是我们存入的这个数据的值。
     
     
     读取数据: 

    sessionStorage.getItem("myName");
    sessionStorage.myName;//这两种写法都可以读取到myName这个数据,如果之前没有存入这个数据,那么返回的值是undefined.
    删除数据:
    sessionStorage.removeItem("myName");//可以将myName这条数据从存储的数据中删除。
    清空数据:
    sessionStorage.clear();//clear()方法将sessionStorage中的数据全部清空。
     
     
     
  5. 总结

    从上面可以看出,web本地存储的功能还是相当强大的,我们可以根据它很方便的实现数据存储。

    比如像购物车模块的信息就可以使用web storage 来存储我们需要的一些数据。

你可能感兴趣的:(web前端,javascript,web前端,html5,web,storage,本地存储,数据信息存储)