zoukankan      html  css  js  c++  java
  • HTMl5的sessionStorage和localStorage的一些区别

    之前一直用cookies存储 cookies的缺点:1,大小限制4k,2带宽浪费,3.难以操作。

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

    localStorage是将数据保存在客户端本地的硬件设备上,除非主动删除数据,否则数据是永远不会过期的。

    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

    原作者:雨中无伞

    原文地址:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html

  • 相关阅读:
    【LeetCode OJ】Remove Element
    【LeetCode OJ】Remove Duplicates from Sorted Array
    【LeetCode OJ】Swap Nodes in Pairs
    【LeetCode OJ】Merge Two Sorted Lists
    【LeetCode OJ】Remove Nth Node From End of List
    【LeetCode OJ】Two Sum
    【LeetCode OJ】Majority Element
    最长公共子序列问题
    php fopen与file_get_contents的区别
    PHP 技巧集合
  • 原文地址:https://www.cnblogs.com/jolee/p/5997709.html
Copyright © 2011-2022 走看看