html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此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仅仅是为了在本地“存储”数据而生。

二、localStorage 和 sessionStorage 的区别

localStorage是持久保存的,只有主动删除才会消失。
sessionStorage是会话性的,结束当页会话则会消失。

三、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

localStorage、sessionStorages 使用的更多相关文章

  1. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  2. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  3. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  4. cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别

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

  5. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  6. 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考

    首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...

  7. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  8. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

  9. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

随机推荐

  1. hdu_3709_Balanced Number(数位DP)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题意:给你一个区间,让你找平衡数的个数 题解:设dp[i][j][k]为前i位以第j位为支撑点的 ...

  2. openwrt 包makefile

    $() 表示要执行的一条语句 $(if 条件, 成立执行, 失败执行)        if条件分支 $(foreach 变量, 成员列表, 执行体)   成员遍历语句 可以看出,语句是可以嵌套使用的. ...

  3. 经典.net面试题目(3)

    1. asp.net中web应用程序获取数据的流程: A.Web Page B.Fill  C.Sql05  D.Data Sourse  E.DataGrid  F.DataSet  G.Selec ...

  4. C++中为什么构造函数初始化列表

    已经有个构造函数负责初始化,为什么还需要构造函数初始化表呢? 在以下三种情况下需要使用初始化成员列表:一,需要初始化的数据成员是对象的情况:二,需要初始化const修饰的类成员:三,需要初始化引用成员 ...

  5. 在Linux系统如何让程序开机时自动启动

    在Linux系统如何让程序开机时自动启动      核心提示:系统的服务在开机时一般都可以自动启动,那在linux系统下如果想要程序在开机时自动启动怎么办?我们知道在 windows系统“开始”--& ...

  6. psy 2

    PSY,心理线,顾名思义,庄家要洗筹必须打破市场尤其是散户的心理防线,才能让大家乖乖的交出筹码.月线的心理线尤其重要,PSY有几个数值,16,25,33,41,50,66,75.PSY的运用也是抓大黑 ...

  7. and的用法(&)

    经常看到jq的源码中各种&连接在一起赋值一个变量, 例一: var b = a&&a.getName 例二: var b = a&&a.getName||d 例 ...

  8. 笨方法学python--简介

    该章提到编程新手所需的三种最重要的技术:读和写,注重细节,发现不同. 读 和 写 即熟悉代码中的各种字符. 注 重 细 节 将例子一字不差地打出来,通过实践训练自己 发 现 不 同 这个是通过长年累月 ...

  9. IIS express 7.5 设置默认文档

    在C:\Users\[电脑用户名]\Documents\IISExpress\config 下面有个applicationhost.config文件,打开文件找到<system.webServe ...

  10. ubuntu 14.04安装postgresql最新版本

    官网:https://www.postgresql.org/download/linux/ubuntu/ ----------------------------------------------- ...