- HTML5为我们提供了在客户端存储数据的新方法
即web storage本地存储:其中包含了 localStorage (一种没有时间限制的数据存储)和 sessionStorage (针对一个会话的数据存储)。
- 本地存储localStorage 和 sessionStorage 介绍
localStorage 方法:存储的数据没有时间限制,除非手动删除。否则第二天、第二周或下一年之后,数据依然可用。
sessionStorage 方法:针对一个 session 进行数据存储。在用户将浏览器窗口关闭后,数据将被清除。
- web storage 与 cookie 的差别
在这之前,数据存储都是由cookie完成的。
但是 cookie 不适合大量数据的存储,cookie 数据不能超过 4k ,同时因为每次http请求都会携带 cookie ,所以cookie 只适合保存很小的数据。同时因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
并且使用 cookie 还需要我们自己去封装 setCookie 和 getCookie 方法。
而在 web storage 中,虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。无论是 localStorage 还是 sessionStorage 都拥有自带的 setItem、getItem、removeItem 和 clear 等方法。
所以在数据存储这一方面使用 web storage 毫无疑问是非常便利的。
当然,这也并不是说 cookie 就没什么用,web storage 只能在客户端本地存储数据,如果需要与服务器端进行交互,那么 cookie 还是不可或缺的存在。
- web storage 的使用方法
我在这就简单的介绍下,详细的方法可以查看 教程。localStorage和 sessionStorage 的使用方法一样。
存入数据:
sessionStorage.setItem("myName","zhou");
//第一种写法,setItem里有两个参数:前面的那个是我们存储的数据的名字,后面那个是存储的这个数据的值
sessionStorage.myName="zhou";//第二种写法,直接使用 .+"数据名字"存储数据,"="后面是我们存入的这个数据的值。
读取数据:
sessionStorage.getItem("myName");
sessionStorage.myName;//这两种写法都可以读取到myName这个数据,如果之前没有存入这个数据,那么返回的值是undefined.
删除数据:
sessionStorage.removeItem("myName");//可以将myName这条数据从存储的数据中删除。
清空数据:
sessionStorage.clear();//clear()方法将sessionStorage中的数据全部清空。
- 总结
从上面可以看出,web本地存储的功能还是相当强大的,我们可以根据它很方便的实现数据存储。
比如像购物车模块的信息就可以使用web storage 来存储我们需要的一些数据。
即web storage本地存储:其中包含了 localStorage (一种没有时间限制的数据存储)和 sessionStorage (针对一个会话的数据存储)。
localStorage 方法:存储的数据没有时间限制,除非手动删除。否则第二天、第二周或下一年之后,数据依然可用。
sessionStorage 方法:针对一个 session 进行数据存储。在用户将浏览器窗口关闭后,数据将被清除。
在这之前,数据存储都是由cookie完成的。
但是 cookie 不适合大量数据的存储,cookie 数据不能超过 4k ,同时因为每次http请求都会携带 cookie ,所以cookie 只适合保存很小的数据。同时因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
并且使用 cookie 还需要我们自己去封装 setCookie 和 getCookie 方法。
而在 web storage 中,虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。无论是 localStorage 还是 sessionStorage 都拥有自带的 setItem、getItem、removeItem 和 clear 等方法。
所以在数据存储这一方面使用 web storage 毫无疑问是非常便利的。
当然,这也并不是说 cookie 就没什么用,web storage 只能在客户端本地存储数据,如果需要与服务器端进行交互,那么 cookie 还是不可或缺的存在。
我在这就简单的介绍下,详细的方法可以查看 教程。localStorage和 sessionStorage 的使用方法一样。
存入数据:
sessionStorage.setItem("myName","zhou");
//第一种写法,setItem里有两个参数:前面的那个是我们存储的数据的名字,后面那个是存储的这个数据的值
读取数据:sessionStorage.myName="zhou";//第二种写法,直接使用 .+"数据名字"存储数据,"="后面是我们存入的这个数据的值。
删除数据:sessionStorage.getItem("myName"); sessionStorage.myName;//这两种写法都可以读取到myName这个数据,如果之前没有存入这个数据,那么返回的值是undefined.
清空数据:sessionStorage.removeItem("myName");//可以将myName这条数据从存储的数据中删除。
sessionStorage.clear();//clear()方法将sessionStorage中的数据全部清空。
从上面可以看出,web本地存储的功能还是相当强大的,我们可以根据它很方便的实现数据存储。
比如像购物车模块的信息就可以使用web storage 来存储我们需要的一些数据。