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中所有信息

JS --- 本地保存localStorage、sessionStorage用法总结的更多相关文章

  1. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  2. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  3. JS本地保存数据的几种方法

    1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...

  4. 77.JS本地保存数据的几种方法

    1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...

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

    localStorage 生命周期是永久的  这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage 生命周期为当前窗口或标签 ...

  6. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  7. localStorage sessionStorage 用法

    sessionStorage.getItem('key') // 获取 sessionStorage.setItem('key','value') //设置 sessionStorage.remove ...

  8. js 本地存储 localStorage 之 angular

    今天项目中用到 php yii框架 用的不是 angular路由 所以用rootScope传值是不行的 我就用到了 localStorage 本地持久化存储 如下 set 顾名思义是设置 值 loca ...

  9. js 本地缓存localStorage

    .localStorage - 没有时间限制的数据存储 ,,]; localStorage.setItem("stor",arr); console.log(localStorag ...

随机推荐

  1. [Python] Python 100例

    题目1:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #程序源 ...

  2. 机器学习算法总结(五)——聚类算法(K-means,密度聚类,层次聚类)

    本文介绍无监督学习算法,无监督学习是在样本的标签未知的情况下,根据样本的内在规律对样本进行分类,常见的无监督学习就是聚类算法. 在监督学习中我们常根据模型的误差来衡量模型的好坏,通过优化损失函数来改善 ...

  3. Leetcode:234 回文链表

    leetcode:234 回文链表 关键点:请判断一个链表是否为回文链表.示例 1:输入: 1->2输出: false示例 2:输入: 1->2->2->1输出: true. ...

  4. [SHOI2015]脑洞治疗仪

    嘟嘟嘟 这题其实就是一个线段树维护最大连续和的水题. 别的操作不说,操作1只要二分找区间前\(k\)个0即可. 需要注意的是,因为操作1两区间可能有交,因此要先清空再二分查询-- 复杂度\(O(n l ...

  5. 【vue】钩子函数生命周期

    图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html    https://segmentfault.com ...

  6. (5)HomeAssistant mqtt-433-esp8266-arduino-传感器

    Home Assistant Integrations使用 https://github.com/1technophile/OpenMQTTGateway/wiki/Home-assistant-in ...

  7. IDEA+JUnit

    1.入门 https://blog.csdn.net/smxjant/article/details/78206279 2.比较好的JUnit例子:https://github.com/aws/aws ...

  8. python之xml 文件的读取方法

    ''' xml 文件的读取方法 ''' #!/usr/bin/env python # -*- coding: utf- -*- import xml.etree.ElementTree as ET ...

  9. python内置的高效好用各种库

    二分查找,import bisect 堆排序,import heapq 哈希算法,import hashlib 压缩,lzma 图形处理,PIL 处理xml文件,PyXML 多媒体操作,PyMedia ...

  10. 【php增删改查实例】第二十五节 - 在main.php中显示头像

    在用户成功上传头像以后,用户登录系统,应该能够看到自己的头像,本节演示如何在这个地方: 添加用户头像. 1.用DIV做: border-radius:50% background:url(xxx.jp ...