首页技术文章正文

WEB前端培训之web Storage可让网页将资料存于本地端的技术1

更新时间:2017-06-09 来源:黑马程序员web前端培训学院 浏览量:

这篇文章会涵盖 HTML5 Web Storage 的几个重点观念,并介绍其基本用法,以及一些该注意的地方(包含一个使用 Visual Studio 2012 来撰写範例程式的短片)。
  Web Storage 要点整理
  HTML5 的 Web Storage 是一种可让网页将资料储存于本地端的技术,其作用如同 cookie。
  储存于 Web Storage 中的资料,是以 key-value pair 的形式保存(如同 cookie)。
  Cookie 储存空间很小,最多仅能储存 4 KB 的资料。HTML5 Web Storage 的储存空间则大得多,且依各家浏览器的实作而不同。一般应该至少有 5 MB 的空间。
  储存于 cookie 中的资料会在用户端浏览器与伺服器之间旅行(每次浏览器送出 request 至服务器时就会夹带 cookies),Web Storage 则不会(纯粹运作于用户端)。这表示 Web Storage 不会占用宽带。
  Web Storage 分为两种:local storage 和 session storage。细节稍后会说明。
  Web Storage 有两种
  Web Storage 分为两种:local storage 和 session storage。二者的主要差异在于寿命长短与有效范围。
  寿命长短:储存于 local storage 中的资料,其生命週期较长,session storage 则较短,只要浏览器视窗或分页(tab)关闭就会消失。
  有效范围:储存于 local storage 的资料可以跨浏览器分页(tab),session storage 则不行。
  先知道这样就好,稍后会进一步说明,并且用一个影片来展示它们的差别。
  储存与读取
  储存资料的时候,是用 Storage 物件的 setItem 方法。这裡的 Storage 物件,指的是 localStorage 或 sessionStorage,看你想要使用哪一个储存空间。
  范例:
window.localStorage.setItem("MyKeyName", "MyDataValue");
 
window.sessionStorage.setItem("MyKeyName", "MyDataValue");


本文版权归黑马程序员web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:黑马程序员web前端培训学院;
首发:http://web.itheima.com/ 

分享到:
在线咨询 我要报名
和我们在线交谈!