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()的用法的更多相关文章

  1. sessionStorage和localStorage的用法,不同点和相同点

    一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...

  2. sessionStorage、localStorage简介

    简介 技术一般水平有限,有什么错的地方,望大家指正. sessionStorage.localStorage.cookie这三个是我们在浏览器端用来存储数据的,cookie使用起来较为繁琐以后进行总结 ...

  3. sessionStorage 、localStorage 和 cookie

    localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...

  4. sessionstorage,localstorage和cookie之间的区别以及各自的用法

    由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...

  5. 浏览器之本地缓存存储 localStorage 和 sessionStorage的区别以及用法

    区别: localStorage永久保存在浏览器  :sessionStorage在浏览器关闭之后存储的数据就会销毁 用法:两者用法差不多,但是取值有所不同 编辑页面逻辑代码为: 这是给 id=btn ...

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

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

  7. html5 sessionStorage 与 localStorage存储

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

  8. HTMl5的sessionStorage和localStorage

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

  9. HTML5中的sessionStorage和localStorage

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

  10. [Html5]sessionStorage和localStorage常见操作

    摘要 [Html5]sessionStorage和localStorage的区别 索引 上篇文章简单介绍了它们的区别,已经常见的用法.那我们能通过. 或者类似dic[key]的方式访问吗?答案是当然可 ...

随机推荐

  1. (转)winform下UPD通信的简单应用

    本文转载自:http://blog.csdn.net/wanlong360599336/article/details/7557046 先看效果图: 使用UDP的好处就是不需要三次握手,但是缺点就是存 ...

  2. linux的审计功能(audit)

    为了满足这样的需求:记录文件变化.记录用户对文件的读写,甚至记录系统调用,文件变化通知.什么是auditThe Linux Audit Subsystem is a system to Collect ...

  3. ffmpeg超详细综合教程——摄像头直播

    本文的示例将实现:读取PC摄像头视频数据并以RTMP协议发送为直播流.示例包含了1.ffmpeg的libavdevice的使用2.视频解码.编码.推流的基本流程具有较强的综合性.要使用libavdev ...

  4. Java-Maven-Runoob:Maven Web 应用

    ylbtech-Java-Maven-Runoob:Maven Web 应用 1.返回顶部 1. Maven Web 应用 本章节我们将学习如何使用版本控制系统 Maven 来管理一个基于 web 的 ...

  5. 源码编译安装ceph

    标签(空格分隔): ceph,ceph安装,ceph运维 centos7系统,aarch64架构下安装最新版本的ceph(13.0.0),x86架构的环境无需修改脚本即可. 一,物理环境: 内核版本: ...

  6. 微信企业号支付个人php实现

    导语:分销商,微商提现怎么提? 直接用微信支付. 实现如下: 微信支付配置 /*微信支付*/ 'PAY_WEIXIN' => array( 'appid' => 'XXXX', 'apps ...

  7. VS2017自定义代码片段, 实现快捷输入

    点击VS2017的工具→代码片段管理器, 下图: 语言选择C#, 路径定位到 Visual C#, 然后复制这个路径在电脑中打开 这里以增加 crk 快捷方式输出 Console.ReadKey()来 ...

  8. Oracle10g客户端连接远程数据库配置图解

    yuanwen:http://blog.csdn.net/DKZhu/article/details/6027933 一.      安装oracle客户端 1. 运行setup.exe,出现 2. ...

  9. 使用airmon-ng工具开启监听模式

    使用ifconfig命令查看活动的网络接口 可以看出网卡已经激活了,然后将网卡设置为混杂模式 root@sch01ar:~# airmon-ng start wlan0 用ifconfig查看网卡是否 ...

  10. Mybites和hibernate的优缺点和区别

    Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀的O/R mapping框架.目前属于apache的 ...