HTMl5的存储方式sessionStorage和localStorage详解

   因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

  一、web storage和cookie的区别

  Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

  除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

  但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)

  二、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);

  console.log(storage["key2"]);

  五、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
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Js正则表达式过滤特殊字符、表情的实例代码: let ret = "12312ffds#¥@¥#%^***(()))*)).`@%@¥@¥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~!@#¥……*()——|{}【】‘;:”“'。,、?]
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用
HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这
近日,微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号,项目名称为 ChakraCore,遵循MIT许可协议。 ...,HTML5中国,中国最大的HTML5中文门户。
这篇文章报道的不是“新闻”,因为W3C早已开始着手CSS变量方面的工作。至于Google,则要追溯到11月初,当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...,HTML5中国,中国最大的HTML5中文门户。