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. ASP.NET MVC 使用TempData

    ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个控制器Action间传递临时的数据或者给View传递一些临时的数据,相信大家都看过"在ASP.NET页面间传值的方法 ...

  2. 贝叶斯分类器(Bayes分类器)

    贝叶斯(Bayes)定理      (条件概率)   贝叶斯分类器(Bayes分类器)   1概念: 将每个属性及类别标记视为随机变量 给定一个具有属性集合(A1, A2,…,An)的记录 目标是预测 ...

  3. GsonFormat 报错

    GsonFormat原来也有bug 我是用GsonFormat来生成java bean的,但是运行起来居然报 Caused by: java.lang.NumberFormatException: E ...

  4. 一篇很全面的freemarker教程 前端工程师必备

    FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: 1,文本:直接输出的部分 2,注释:<#-- ... -->格式部分,不会输 ...

  5. 解决scrollview不滚动

    scrollView不滚动的时候 试试这个,有时候药到病除:

  6. ajax实例及实现文本框异步搜素

    search.jsp(WebContent/jsp/search.jsp) <%@ page language="java" contentType="text/h ...

  7. JS-加载页面的时候自动选择刚才所选择option

    <body class="no-skin" onload="option_auto(${pd.PACK_SORT})"> <select na ...

  8. The magic behind configure, make, make install

    原文:https://robots.thoughtbot.com/the-magic-behind-configure-make-make-install#where-do-these-scripts ...

  9. C#生成DLL文件

    使用csc命令将.cs文件编译成.dll的过程 很多时候,我们需要将.cs文件单独编译成.dll文件, 操作如下: 打开命令窗口->输入cmd到控制台->cd C:\WINDOWS\Mic ...

  10. Windows快捷键大全(从XP到win8.1)

    常见用法 F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F5 刷新 F10或ALT 激活当 ...