H5新增的Web Storage本地存储

html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

一、web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。

Cookie的大小是受限的(每条cookie的存储空间为4k),并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

二、html5 web storage的浏览器支持情况
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){
alert("浏览支持localStorage") 
}
else

alert("浏览暂不支持localStorage") 

//或者 if(typeof window.localStorage == ‘undefined‘){ alert("浏览暂不支持localStorage") }

三、localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法:
setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

sessionStorage.setItem("key", "value");  【官方推荐存取方法】
localStorage.setItem("site", "js8.in");

getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

var value = sessionStorage.getItem("key");   【官方推荐存取方法】
var site = localStorage.getItem("site");

removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:

sessionStorage.clear(); 
localStorage.clear();

四、其他操作方法:点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage;

storage.key1 = "hello"; 
storage["key2"] = "world"; 
console.log(storage.key1);    //hello
console.log(storage["key2"]);  //world  

五、localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage; 
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i); 
var value = storage.getItem(key); 
console.log(key + "=" + value); 
}

六、storage事件
storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

if(window.addEventListener){ 
  window.addEventListener("storage",handle_storage,false); 
}
else if(window.attachEvent)

  window.attachEvent("onstorage",handle_storage); 

function handle_storage(e){
  if(!e){e=window.event;} 
}

storage事件对象的具体属性如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

七、localStorage其他注意事项

一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

注:非原创!

原文地址:https://www.cnblogs.com/mz-2015/p/9708738.html

时间: 2024-10-15 09:40:56

H5新增的Web Storage本地存储的相关文章

Web Storage--HTML5本地存储

什么是Web Storage Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点优势: 存储空间大:cookie只有4KB的存储空间,而Web Storage在官方建议中为每个网站5M. 可选择性强:Web Storage分为两种:sessionStorage和localStorage Web Storage的使用方法 在使用上,session Storage和local Storage大同小异,只是se

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数

Web端本地存储

1.需求背景:当用户在页面上添加一行一行的数据时,突然发现网络断掉了,页面上编辑的数据没法保存进数据库,所以需要一个本地端的临时保存功能,以便在网络通畅后重新加载出来! 2.解决方案: 结合网上搜刮,考虑到了这几种方式:1)采用cookie; 2)看能不能采用浏览器的页面缓存来模拟 3)使用html5 1)cookie使用(做测试是直接用浏览器打开没有效果,需要放到站点下) 所有浏览器都支持,所以不需要去考虑兼容性的问题; 浏览器对于同一domain最多支持20个左右cookie,每个cooki

H5笔记——locaStorage和sessionStorage本地存储的一些坑

当使用window.localStorage或者window.sessionStorage 存储json数据时需要将json数据用JSON.stringify(data)转换成json字符串再存储在本地存储,否侧直接存储json数据,下次使用时用 JSON.parse(data)无法转换成json对象. 因为如果直接存储json数据的格式到本地存储,那么下次用的时候打印出来的数据直接是[object Object]而不是正确的string

web storage 离线存储

用来保存键值对数据,数据以属性的方式保存在storage实例对象上 可以用storage1.length来决定键值对的数量,但是无法决定数据的大小,storage1.remainingSpace可以获得剩余空间大小 只能以string的形式保存数据,非string数据会被转化为string再存储 1.sessionStorage 存储一次服务会话中的数据,浏览器关闭后清除数据,即使浏览器奔溃也可以恢复(Firefox和webview可以,ie不行) sessionStorage.setItem(

H5本地储存Web Storage

一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据. 下面是Cookie的限制: 大多数浏览器支持最大为 4096 字节的 Cookie.    浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量.大多数浏览器只允许每个站点存储 20 个Cookie:如果试图存储更多 Cookie,则最

THML5本地存储 Web Storage

Web Storage 介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式. ? localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作: ? sessionStorage在会话期内有效,数据在浏览器关闭后自动删除: localStorage是基于域的,任何在该域内的页面都可以访问, sessionStorag

HTML5本地存储 Web Storage

Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式. localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作: sessionStorage在会话期内有效,数据在浏览器关闭后自动删除: localStorage是基于域的,任何在该域内的页面都可以访问, sessionStorage在保

h5本地存储storage

storage本地存储,似乎有点想起cookie,的确用法也类似于cookie.但是storage较cookie有不少好处: 存储量大:在客户端完成,不会请求客户端: storage分为sessionStorage和localStorage. 1.sessionStorage  临时存储,当页面关闭的时候,本地存储也就消失.并且sessionStorage的数据是不会共享的. 2.localStorage 永久删除,可以手动删除数据,数据是共享的. storage下有以下api: window.