HTMl5的存储方式sessionStorage和localStorage详解

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仅仅是为了在本地“存储”数据而生(来自@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事件对象的具体属性如下表:

PropertyTypeDescription
keyStringThe named key that was added, removed, or moddified
oldValueAnyThe previous value(now overwritten), or null if a new item was added
newValueAnyThe new value, or null if an item was added
url/uriStringThe page that called the method that triggered this change

转载于:https://www.cnblogs.com/lenther2002/p/5047094.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql5.7四字节中文_mysql 字节问题,中文和数字

在mysql 5.1.5-alpha下测试得出如下结论latin1:1character1byte, 1汉字2character,也就是说一个字段定义成 varchar(200)&#xff0c;则它可以存储100个汉字或者200个字母。这一点要注意&#xff0c;尤其是当字段内容是字母和汉字组成时&#xff0c;尽量假设字段内容都是由汉字…

mysql 主主忽略错误_MySQL 主主报错: Fatal error: The slave I/O thread stops because master and slave have...

Mysql 主主启动错误处理error 信息&#xff1a;Slave_IO_State:Master_Host: 192.168.6.87Master_User: replicationMaster_Port: 3306Connect_Retry: 60Master_Log_File: mysql-bin.000003Read_Master_Log_Pos: 106Relay_Log_File: mysqld-relay-bin.000002Relay_Log_Pos: 4Re…

mysql内部_MySQL SQL语句内部剖析

一条SQL在MySQL体系结构内的执行流程:注意只有查询操作才会走查询缓存&#xff0c;而表的结构和数据发生改变时将会清空查询缓存。所以开启查询缓存的意义不大&#xff0c;8.0后已经废弃了该功能。一条update在存储引擎内部的执行步骤如下:SQL:update t set cc1 where id2;SQL完…

用Backbone.js创建一个联系人管理系统(四)

原文: Build a Contacts Manager Using Backbone.js: Part 4 这一系列教程的第四部分,教我们如何完成对已经存在的Contacts进行编辑和保存. 本教程是基于这一系列的前三个教程. 有不清楚的请先阅读前三部分. 开始 在Contact原模版里添加一个edit按钮. <button class"ed…

mysql默认时间怎么不同步_MYSQL 更新时间自动同步与创建时间默认值共存问题

本文作者&#xff1a;苏生米沿在使用SQL的时候&#xff0c;希望在更新数据的时候自动填充更新时间&#xff0c;那么在mysql中是如何实现的呢&#xff1f;如创建表usersCREATE TABLE RS_SIGNUPUSER (ID VARCHAR(36) COMMENT 主键(业务功能无关),USERNAME VARCHAR(50) COMMENT 姓…

HOJ-2662Pieces Assignment(状态压缩,动态规划)

Pieces Assignment Source : zhouguyue Time limit : 1 sec Memory limit : 64 M Submitted : 415, Accepted : 149 Background 有一个n*m的棋盘(n、m≤80,n*m≤80)要在棋盘上放k(k≤20)个棋子&#xff0c;使得任意两个棋子不相邻&#xff08;每个棋子最多和周围4个棋子相…

python代码技巧_让你python代码更快的3个小技巧

大家好&#xff01;今天呢&#xff0c;我们来聊一聊如何加速你的 python 代码。Python 语言的优点可以列举出许多&#xff0c;语法简单易懂、模块丰富、应用广泛等等。但是世界上没有有完美的东西&#xff0c;python 一个明显缺点就是运行速度慢&#xff0c;至少跟 C 语言没法比…

《5》CentOS7.0+OpenStack+kvm云平台的部署—组态Horizon

感谢朋友支持本博客&#xff0c;欢迎共同探讨交流&#xff0c;因为能力和时间有限&#xff0c;错误之处在所难免&#xff0c;欢迎指正&#xff01;假设转载。请保留作者信息。 博客地址&#xff1a;http://blog.csdn.net/qq_21398167 原博文地址&#xff1a;http://blog.csdn.n…

python怎么打开一个窗口_python – 使按钮一次只打开一个窗口(通过关闭Toplevel窗口启用按钮)...

我希望NewWinButton一次只创建一个新窗口,这意味着如果if NewWin.winfo_exists() 1:NewWinButton.config(statedisabled)else:NewWinButton.config(statenormal)如果我在新窗口中添加一个按钮(本例中为QuitButton),我可以使这个工作&#xff1a;import tkinter as tkroot tk.…

从此走上一条iOS程序猿不归路。。。

新的城市&#xff0c;新的生活&#xff01;前不久刚刚结束了苦逼的面试找工作之旅&#xff0c;期间也小有收货&#xff0c;如今正处年底工作闲暇之余&#xff0c;将前一阵子陆陆续续的总结整理了一下&#xff0c;本人菜鸟程序猿一只&#xff0c;水平有限&#xff0c;本文总结的…

springboot mysql事物_在Spring Boot中使用数据库事务

关于数据库访问还有一个核心操作那就是事务的处理了&#xff0c;前面两篇博客小伙伴们已经见识到Spring Boot带给我们的巨大便利了&#xff0c;其实不用猜&#xff0c;我们也知道Spring Boot在数据库事务处理问题上也给我们带来惊喜&#xff0c;OK&#xff0c;废话不多说&#…

什么是JSONP以及它是怎么产生的

什么是JSONP以及它是怎么产生的 1.什么是jsonp JSONP(JSON with Padding)是一个非官方的协议&#xff0c;它允许在服务器端集成Script tags返回至客户端&#xff0c;通过javascript callback的形式实现跨域访问&#xff08;这仅仅是JSONP简单的实现形式…

cinder连接mysql数据库_Openstack入门篇(十六)之Cinder服务的部署与测试

1.理解块存储服务操作系统获得存储空间的方式一般有两种&#xff1a;通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘&#xff0c;然后分区、格式化、创建文件系统&#xff1b;或者直接使用裸硬盘存储数据(数据库)通过 NFS、CIFS 等 协议&#xff0c;mount 远程的文件系统第一种…

Mysql经常使用命令

1.导出整个数据库 mysqldump -u username -p --default-character-setlatin1 数据库名 > 导出的文件名称(数据库默认编码是latin1) mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.sql 2.导出一个表 mysqldump -u username -p 数据库名 表名> 导出的文件名称 mysqldump …

stack heap java_java中的Heap 和 Stack | 学步园

1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方。与C不同&#xff0c;Java自动管理栈和堆&#xff0c;程序员不能直接地设置栈或堆。2. 栈的优势是&#xff0c;存取速度比堆要快&#xff0c;仅次于直接位于CPU中的寄存器。但缺点是&#xff0c;存在栈中的数据大小与…

JavaScript密码复杂度

<!DOCTYPE html><html><head lang"en"> <meta charset"UTF-8"> <title>密码复杂度</title></head><body><script type"text/javascript"> //密码复杂度var pwprompt("请输入密…

最后关于Pipeline完整的图如下:

最后关于Pipeline完整的图如下&#xff1a; 转载于:https://www.cnblogs.com/aaa6818162/p/5077988.html

amr 转mp3 java_JAVA 音频转换AMR 转MP3,OS,Linux cent os 7

场景近期在做微信开发时&#xff0c;需要获取用户发给公众服务号的语音留言。而从微信服务端下载来的语音格式却是amr的格式&#xff0c;同样的你手机录音、Android语音等也都是生成amr格式文件。但当你想在web页面去播放此文件时&#xff0c;就困难了。因为无论是当前HTML5的标…

input hidden用法

之前获取数据传数据&#xff0c;都是写在全局变量里&#xff0c;今天老板告诉我说用input hidden来存&#xff0c;我百度了一下&#xff0c;确实是个好方法&#xff0c;记录之&#xff1a; 1 隐藏域在页面中对于用户是不可见的&#xff0c;在表单中插入隐藏域的目的在于收集或发…

java 静态方法 多线程_Java静态方法的线程安全性问题

如果多个线程同时访问同一个静态方法&#xff0c;后一个线程传递的参数值会覆盖前一个线程传递的参数值吗&#xff1f;代码示例如下&#xff1a;被访问的静态资源&#xff1a;public class C {public static void test(String[] value) throws InterruptedException{Thread.sle…