JS的本地保存localStorage、sessionStorage用法总结

localStorage、sessionStorage是Html5的特性,IE7以下浏览器不支持

为什么要掌握localStorage、和sessionStorage。

JS中为了减少与服务器的通信,经常会用到保存的数据到本地的功能,

例如本地用户信息保存。

      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(不同源,因为端口不同)

     localStorage、和sessionStorage的用法:

  • localStorage和sessionStorage使用时使用相同的API:

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    枚举localStorage的方法:

    for(var i=0;i<localStorage.length;i++){

    var name = localStorage.key(i)​;

    var value = localStorage.getItem(name);​

    }

    删除localStorage中存储信息的方法:

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();​//清空localStorage中所有信息

sessionStorage和localStorage的区别的更多相关文章

  1. cookies,sessionStorage 和 localStorage 的区别

    请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...

  2. 7,请描述下cookies,sessionStorage和localStorage的区别

    7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...

  3. cookies、sessionStorage和localStorage的区别

    cookies.sessionStorage和localStorage的区别 对比 特性 Cookie LocalStorage SessionStorage 数据的生命周期              ...

  4. [Html5]sessionStorage和localStorage的区别

    摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStora ...

  5. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  6. Cookie、sessionStorage、localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  7. 描述一下 cookies,sessionStorage 和 localStorage 的区别?

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  8. cookies,sessionStorage,localStorage的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. cookies,sessionStorage和localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  10. cookie、sessionStorage、localStorage的区别?

    数据存储位置 三者都是存储在游览器本地的 区别在于cookie是服务器端写入的,而sessionStorage.localStorage是由前端写入的 生命周期 cookie的生命周期是由服务器端写入 ...

随机推荐

  1. Oracle 11g数据库的创建

    由于是自己自学Oracle,如果有问题,请大家指出,谢谢! Oracle提供了DBCA来创建数据库,对于初学者来说使用DBCA创建数据库简化了很多工作和设置,直接在交互界面即可实现所有的功能. 然而对 ...

  2. 使用 Java 8 语言功能

    Android Studio 3.0 及以上版本支持所有 Java 7 语言功能,以及部分 Java 8 语言功能(具体因平台版本而异). 本页介绍您可以使用的 Java 8 语言功能.如何正确配置项 ...

  3. pycharm运行Django发生AppRegistryNotReady: Apps aren't loaded yet.

    pycharm中运行django默认情况下并不是执行项目的,所以如果在非manage.py,会发生异常. raise AppRegistryNotReady("Apps aren't loa ...

  4. JavaScript大杂烩18 - Web开发的MVVM模式

    MVC VS. MVP VS. MVVM  了解MVVM模式之前,我们先来简单了解一下从MVC到MVVM的变迁.这个变迁是耦合从紧到松的变迁,是对依赖处理的进化,是应对变化技术的成熟. MVC  MV ...

  5. JavaScript大杂烩7 - 理解内置集合

    JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Arra ...

  6. 四元数与欧拉角(RPY角)的相互转换

    RPY角与Z-Y-X欧拉角 描述坐标系{B}相对于参考坐标系{A}的姿态有两种方式.第一种是绕固定(参考)坐标轴旋转:假设开始两个坐标系重合,先将{B}绕{A}的X轴旋转$\gamma$,然后绕{A} ...

  7. 逻辑回归&线性回归

    # coding:utf-8 import numpy as np from sklearn import linear_model, datasets import matplotlib.pyplo ...

  8. excel中如何隐藏列和取消隐藏列

    https://jingyan.baidu.com/article/148a192191dc9a4d71c3b11c.html excel如何隐藏列 1 先看下原表格是怎么样的. 2 隐藏列方法一:首 ...

  9. 第五章 绘图基础(LINEDEMO)

    LINEDEMO程序绘制一个矩形.两条直线.一个椭圆和一个圆角矩形.该程序表明,定义了封闭矩形的这些函数确实对这些区域进行了填充,因为椭圆后面的线被隐藏了. /*------------------- ...

  10. 转:tcpdump抓包分析(强烈推荐)

    转自:https://mp.weixin.qq.com/s?__biz=MzAxODI5ODMwOA==&mid=2666539134&idx=1&sn=5166f0aac71 ...