您现在的位置是:首页 > 技术教程 正文

localStorage和sessionStorage

admin 阅读: 2024-03-30
后台-插件-广告管理-内容页头部广告(手机)

目录

一、localStorage和SessionStorage在哪里,是什么

二、localStorage和sessionStorage区别

三、localStorage常用方法

四、sessionStorage常用方法


一、localStorage和SessionStorage在哪里,是什么

【1】在浏览器开发者工具的Application栏目里(F12或者Ctrl+shift+i打开开发者工具)

【2】localStorage、sessionStorage是浏览器自带的mini数据库 。

【3】在特定域名的网页才能访问特定数据。

【4】只能存贮字符串,存储数组、对象的时候用JSON.stringify()转为字符串,拿数组、对象数据的时候,用JSON.pase()将字符串传为数组或对象。

二、localStorage和sessionStorage区别

【1】生命周期不同

        localStorage生命周期:除非你有意删除localStorage中的数据,或者浏览器卸载重新安装,里面的数据一直存在。刷新也好,切换浏览地址也好,关闭浏览器也好数据都是不会丢失的。

       sessionStorage生命周期:它的生命周期比localStorage的生命周期短。加上localStorage数据丢失的情况,关闭浏览器也会导致数据丢失。不过刷新页面,切换页面(无论什么页面)都不会丢失数据。

【2】容量不同

       localStorage:20M,不同浏览器大小会有不同

       sessionStorage:5M,不同浏览器大小会有不同

【3】使用场景不一样

       由于他们自身不同的特性,使用场景是不一样的。localStorage一般使用于记住密码,sessionStorage一般适用于敏感密码。

三、localStorage常用方法

1.存值共有3种方式,localStorage相当于window对象下面的一个属性,所以有[]和.调用,但也具有自身的setItem方法

  1. // 自身方法
  2. localStorage.setItem("name","bonly");
  3. // []方法
  4. localStorage["name"]="bonly";
  5. // .方法
  6. localStorage.name="bonly";

2.取值也是如此,自身的方法是getItem

  1. // 自身方法
  2. localStorage.getItem("name");
  3. // []方法
  4. localStorage["name"];
  5. // .方法
  6. localStorage.name;

3.改变的方式,就是相当于给对应的key重新赋值,就会把原来的值覆盖掉

  1. // 自身方法
  2. localStorage.setItem("name","TOM");
  3. // []方法
  4. localStorage["name"]="TOM";
  5. // .方法
  6. localStorage.name="TOM";

4.移除某一个值,可以通过对象删除属性的关键字delete也可以用自身的方法removeItem

  1. // 自身方法
  2. localStorage.removeItem("name");
  3. // []方法
  4. delete localStorage["name"];
  5. // .方法
  6. delete localStorage.name

5.获取所有的key

  1. // 通过自身的key
  2. for (var i=0;i<localStorage.length;i++) {
  3. console.log(localStorage.key(i));
  4. }
  1. // 通过for in 循环获取
  2. for(var key in localStorage){
  3. console.log(key);
  4. }

6.获取所有的值

localStorage.valueOf();取出所有的值

7.清除所有的值

localStorage.clear()

8.判断是否具有某个key,hasOwnProperty方法

  1. localStorage.hasOwnProperty("name")
  2. // 如果存在的话返回true,不存在返回false

四、sessionStorage常用方法

同localStorage。

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索