[转]sessionStorage()和localStorage()的用法
JS的本地保存localStorage、sessionStorage用法总结:
1. localStorage、sessionStorage是Html5的特性,IE7以下浏览器不支持
为什么要掌握localStorage、和sessionStorage:
2. JS中为了减少与服务器的通信,经常会用到保存的数据到本地的功能,例如本地用户信息保存。
3. localStorage和sessionStorage的区别:
(1)、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
(2)、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
(3)、localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了
(4)、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
(5)、
http://www.test.com
https://www.test.com (不同源,因为协议不同)
http://my.test.com(不同源,因为主机名不同)
http://www.test.com:8080(不同源,因为端口不同)
4.localStorage、和sessionStorage的用法:
localStorage和sessionStorage使用时使用相同的API:
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
5.枚举localStorage的方法:
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
6.删除localStorage中存储信息的方法:
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
代码实现:
sessionStorage.setItem("user_name","test333");
alert(sessionStorage.getItem("user_name")); //打印test333
sessionStorage.setItem("user_name","test22");
alert(sessionStorage.getItem("user_name")); //打印test22
localStorge和sessionStorage的用法基本一致,关于cookie、sessionStorage、localStorage的区别可以这篇文章:https://www.cnblogs.com/jacobb/p/6824838.html
关于session的实际应用(获取用户上一次的浏览位置)可以参考这篇文章:https://blog.csdn.net/oaa608868/article/details/53539954
[转]sessionStorage()和localStorage()的用法的更多相关文章
- sessionStorage和localStorage的用法,不同点和相同点
一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...
- sessionStorage、localStorage简介
简介 技术一般水平有限,有什么错的地方,望大家指正. sessionStorage.localStorage.cookie这三个是我们在浏览器端用来存储数据的,cookie使用起来较为繁琐以后进行总结 ...
- sessionStorage 、localStorage 和 cookie
localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...
- sessionstorage,localstorage和cookie之间的区别以及各自的用法
由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...
- 浏览器之本地缓存存储 localStorage 和 sessionStorage的区别以及用法
区别: localStorage永久保存在浏览器 :sessionStorage在浏览器关闭之后存储的数据就会销毁 用法:两者用法差不多,但是取值有所不同 编辑页面逻辑代码为: 这是给 id=btn ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- html5 sessionStorage 与 localStorage存储
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
- HTMl5的sessionStorage和localStorage
HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...
- HTML5中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- [Html5]sessionStorage和localStorage常见操作
摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...
随机推荐
- 使用nagios插件 check_mysql_health 过程中遇到的error
使用nagios插件 check_mysql_health 过程中遇到的error 1.如果在运行监控mysql插件的时候遇到了error安装以下依赖包就可以解决: yum install perl- ...
- UnQLite简介
UnQLite是,由Symisc Systems公司出品的一个嵌入式C语言软件库,它实现了一个自包含.无服务器.零配置.事务化的NoSQL数据库引擎.UnQLite是一个文档存储数据库,类似于Mong ...
- Vue.js:表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- 1122 Hamiltonian Cycle
题意:包含图中所有结点的简单环称为汉密尔顿环.给出无向图,然后给出k个查询,问每个查询是否是汉密尔顿环. 思路:根据题目可知,我们需要判断一下几个条件:(1).首先保证给定的环相邻两结点是连通的:(2 ...
- composer 发布自己的开源软件
首先创建一个github项目. 在项目中,创建一个composer.json文件. { "name": "jiqing9006/valid", "de ...
- linux 挂载硬盘
fdisk -l mkfs.ext4 /dev/vdb mkdir /data mount -t ext4 /dev/vdb /data 编辑/etc/fstab /dev/vdb /data ext ...
- 三级联动第二种方法 三级联动.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 转摘:ashx+jquery-autocomplete文本框输入提示功能Asp.net
引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...
- Java微信公众平台开发(十四)【番外篇】--微信web开发者工具使用
转自:http://www.cuiyongzhi.com/post/58.html 为帮助开发者更方便.更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具.它是一个桌面应用,通过模拟微信 ...
- BurpSuite—-Spider模块(蜘蛛爬行)
一.简介 Burp Spider 是一个映射 web 应用程序的工具.它使用多种智能技术对一个应用程序的内容和功能进行全面的清查. Burp Spider 通过跟踪 HTML 和 JavaScript ...