本地化存储Storage

为何会引入Storage(sessionStorage,localStorage,globalStorage)

  • Web storage的目的是克服由cookie带来的限制,当数据须要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一种在cookie以外存储会话数据的途径和提供一种能够大量跨会话存在的数据机制;sessionStorage 对象应该主要用于仅针对会话的小段数据的存储。若是须要跨越会话存储数据, 那么 localStorage 更为合适。

Storage介绍

  • 对于 localStorage 而言,大多数桌面浏览器会设置每一个来源 5MB 的限制。Chrome 和 Safari 对每 个来源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
  • 对 sessionStorage 的限制也是因浏览器而异。有的浏览器对 sessionStorage 的大小没有限制, 但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制,也都是 2.5MB。IE8+和 Opera 对 sessionStorage 的限制是 5MB
sessionStorage介绍

sessionStorage对象存储特定某个会话的数据(绑定于某个服务器的会话),即该数据只保存到浏览器关闭(cookie也是会话级别); 存储在seesionStorage中的数据能够跨越页面刷新页面存在,javascript

localStorage介绍

要访问同一个localStoarge对象,页面必须来自同一个域名(子域名无效),使用同一种 协议,在同一个端口上。java

Storage底层原理

  1. sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所通过的这段时间,session对象可用来保存在这段时间内所要求保存的任何数据.
  2. localStorage:将数据保存在客户端本地的硬件设备(磁盘文件)中,即便浏览器关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可用 永久保存,除非程序或人工删除,没有过时时间.

Storage的特色

(1)都会在浏览器端保存,有大小限制,同源限制;
(2) sessionStorage在(会话级别)窗口关闭前有效;localStorage持久化的本地存储除非用户主动删除数据,不然数据是永远不会过时的;
(3)sessionStorage不能共享,localStorage在同源文档之间共享;
(4)对于localstorage而言,大多数桌面的浏览器都会设置来源5MB的限制,chorme和Safari对每一个来源的限制是2.5MB;对于sessionStorage的限制也是由于浏览器而异,有的浏览器对sessionStage的大小是没有限制的,但chrome,safari都是2.5MB.
(5)只能存储字符串 (JSON.stringify() 对象-->字符串(JSON.parse() 字符串-->对象)

Storage的优势

相比 cookie ,Web Storage 的优势主要表如今存储空间更大,可存储的内容更大。cookie每次都随请求数据发送到服务器端,Web Storage不会和请求数据一同发送到服务器端,占用带宽更少

Storage的缺点

如今全部浏览器都支持 cookie 操做,而只有如今浏览器才支持 Web Storage 操做,若是须要兼容老旧浏览器,就不能使用 Web Storage。而且Storage只能存储字符串类型的数据

Storage(localStorage和sessionStorage)的方法

clear();删除全部值;firefox中没有实现;
getItem(name);根据指定的名字name获取对应的值;
key(index):获取index位置处的值的名字;
removeItem(name):删除由name获取对应的值;
setItem(name,value);为指定name设置对应的value值;

sessionStorage.setItem("key", "value") ////使用方法存储数据
sessionStorage.book = "Professional JavaScript"; //使用属性存储数据 
var value = sessionStorage.getItem("key"); 
sessionStorage.removeItem("key")  // removeItem删除key
sessionStorage.clear()   // clear清除全部的key/value

Storage的应用

sessionStorage: 敏感帐号一次性登陆
localStorage: 长期登陆、判断用户是否已登陆、适合长期保存在本地的数据;Web Storage 的特色,它主要被用于储存一些不常常改动的,不敏感的数据,好比全国省市区县信息。还能够存储一些不过重要的跟用户相关的数据,好比说用户的头像地址、主题颜色等,这些信息能够先存储在用户本地一份,便于快速呈现,等真正从服务器端读取成功后再更改头像地址,主题颜色。另外,基于 storage 事件特色,Web Storage 还能够用于同域不一样窗口间的通讯。
相关文章
相关标签/搜索