关于localStorage和sessionStorage的用法

最新推荐文章于 2023-02-24 19:16:40 发布
最新推荐文章于 2023-02-24 19:16:40 发布
阅读量676 收藏
点赞数 1
分类专栏： java web 文章标签： function html javascript jquery 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20389175/article/details/43668369
版权

首先先看下两者的区别：

        localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

注意：

        不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面

或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可

以共享sessionStorage的。

 用法：

        两者用法一样，

        1.获取localStorage的长度：window.localStorage.length

        2.添加/编辑localStorage的内容：window.localStorage.setItem(键,值);

        3.根据对应的索引去获取对应localStorage的key的值：window.localStorage.key(索引);

        4.根据对应的key获取对应的的value：window.localStorage.getItem(key);

下面是我写的代码，大家可以参考：

<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script src="jquery-1.7.1.js"></script>


  </head>
     <script type="text/javascript">
       function save(){
         if(window.localStorage){
//             localStorage.setItem("input",$("#input").val());
            localStorage.input=$("#input").val();
         }
         if(window.sessionStorage){
//             sessionStorage.setItem("input",$("#input").val());
            sessionStorage.input=$("#input").val();
         }
       }
       function getInput(){       
          if(window.localStorage){
            if(localStorage.getItem("input")){
           var input=localStorage.getItem("input");
           console.log("localStorage.input="+input);
           $("#input").val(input);
            }else{
                console.log("找不到localStorage.input");
            }
            if(sessionStorage.input){
                console.log("sessionStorage.input="+input);
            }else{
                console.log("找不到sessionStorage.input");
            }
          }
       }
       function saveJSON(){
           if(window.localStorage){
             if(localStorage.jsonData){
                var a=JSON.parse(localStorage.jsonData);
                console.log("localStorage.jsonData="+a);               
//                 localStorage.clear();
             }else{
                 localStorage.clear();
            var jsonStr={
              test1:2015,
              test2:'This is a string',
              test3:function(){
                alert("This is a function");
              }
            };
            localStorage.jsonData=JSON.stringify(jsonStr);
             }
           }
       }
       $(function(){
 //          getInput();
          saveJSON();
       });
     </script>
  <body>
    <input id=input size=10 οnchange="save()">
  </body>
</html>



聪明的一休丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
localstorage和sessionstorage使用记录(推荐)
09-27
通过阅读各路大神对web存储locastorage和sessionstorage的用法解析，深有感触，下面小编把localstorage和sessionstorage使用记录分享到脚本之家平台，供大家参考
localStorage和sessionStorage用法与区别
分享日常bug
06-22 1471
localStorage和sessionStorage用法与区别
详解localStorage和sessionStorage
impact_factor的博客
09-11 6518
localStorage和sessionStorage一、什么是 localStorage、sessionStorage二、使用方法三、localStorage 的优势与局限 一、什么是 localStorage、sessionStorage 在 HTML5 中，新加入了一个 localStorage 特性，这个特性主要是用来作为本地存储来使用的，解决了 cookie 存储空间不足的问题(cookie 中每条 cookie 的存储空间为 4k)， localStorage 中一般浏览器支持的是 5M 大小，
localStorage和sessionStorage之间的区别？
weixin_47450807的博客
03-22 1万+
一、写在前面 今天总结一下localStorage和sessionStorage之间的区别。 二、具体区别 2.1、声明周期的区别 localStorage是永久存储在浏览器中，只要当用户不删除数据，则该数据就会一直存放在localStorage中。sessionStorage是会话级别的存储，从名字session我们就可以看出来了，也就是当用户关闭浏览器，此时数据就会被销毁。 2.2、存储大小：localStorage和sessionStorage存储大小都是5MB。 2.3、sessionStorage
JavaScript——localStorage和sessionStorage的使用方法
热门推荐
NanChen的博客
10-12 1万+
首先localStorage和sessionStorage都是用来存储客户端临时信息的对象。说白了就是把信息放在本地中，通常用于记住密码这一类需要实现存储数据的功能。通常我们自己写的网页每次刷新后数据就自动消失了，如何让他刷新完毕过后还保留其中用户输入的数据呢？这里就用到loaclStorage和sessionStorage方法 其两者的特点如下： 1、用来存储临时信息 2、只能存放字符串类型的对象 3、localStorage生命周期是永久 4、sessionStorage生命周期为当前窗口或标
localStorage和sessionStorage与cookie
weixin_48927323的博客
09-08 2972
1）Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可跨域调用。session对象可以用来保存在这段时间内所要求保存的任何数据。4）服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端 ，服务器端也可以保存用户的临时会话数据，服务器端的session机制，如jsp的session对象，数据保存在服务器上。
LocalStorage和SessionStorage的用法
leveretz的博客
11-10 457
LocalStorage和SessionStorage的用法
localStorage和sessionStorage区别和使用
qq_39148344的博客
10-08 458
一、什么是localStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage、sessionStorage的优...
localStorage 和 sessionStorage
minihuabei的博客
08-20 2313
cookie和session 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie和session跟服务端进行数据交互。 cookie和session都是用来跟踪浏览器用户身份的会话方式 cookie和session的区别 1.使用方式 cookie机制：如果不在浏览器中设置过期事件，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期时间，cookie会被保存在硬盘中，关闭浏览器后，cookie数
localStorage和sessionStorage
qq_50276105的博客
02-24 3214
localStorage生命周期：除非你有意删除localStorage中的数据，或者浏览器卸载重新安装，里面的数据一直存在。刷新也好，切换浏览地址也好，关闭浏览器也好数据都是不会丢失的。由于他们自身不同的特性，使用场景是不一样的。1.存值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem方法。3.改变的方式，就是相当于给对应的key重新赋值，就会把原来的值覆盖掉。转为字符串，拿数组、对象数据的时候，用。5.获取所有的key。
关于localStorage与sessionStorage的区别与使用
一李
10-21 1271
目录 关于localStorage与sessionStorage的区别与使用 介绍 主要区别 相同之处： 使用Web Storage的一些优点： 使用方法： 项目中的实际应用 1.结合localStorage实现路由守卫，用户实现一次登录即可 2.结合sessionStorage实现用户在一次会话中保存数据，实现页面的二级密码 关于localStorage与sessionStorage的区别与使用 介绍 在Html5主要更新两个与本地储存相关的的内容： Web Storage.
cookie，localStorage,sessionStorage区别与应用
01-07
sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息，只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭，数据清空 存在内存中，除非自己删除 浏览器关闭，...
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
cookie，localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同，今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法，需要的朋友参考下吧
store:使用localStorage和sessionStorage的更好方法
05-11
一种功能丰富且友好的方式，可以利用localStorage和sessionStorage（JSON，命名空间，扩展等）。 下载： 或 ： npm install store2 ： Install-Package store2文献资料主要存储功能可以直接处理set ， get ， ...
详解Vue中localstorage和sessionstorage的使用
08-28
主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得，有需要的朋友跟着小编参考学习下吧。
java 填写模板表格和动态生成表格
楠丶俊枫的专栏
03-11 3580
效果看到了然后看代码，代码中方法都有注释就不多说废话了：“` package com.poi;import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream;
docx文档的解压缩写法
楠丶俊枫的专栏
05-13 2690
package com; import static org.junit.Assert.assertEquals; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.i
原生js跟jquery 的对比
楠丶俊枫的专栏
11-16 1769
选择器 便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。 然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。 1.获取页面所有的div /* jQuery */   $("div")      /* native equivalent */   d
12个免费web后台模板
楠丶俊枫的专栏
03-16 1462
1.  Charisma Admin Template （示例）     Charisma是一个响应式管理模板，基于Twitter Bootstrap构建。拥有9种外观主题，包括几乎所有的东西，如表单、图表、按纽、表格、文件管理器、相册等。可到 GitHub link 下载该模板。   2.  INADMIN – jQuery Admin Template
详解vue中localstorage和sessionstorage的使用
最新发布
08-23
通过使用这些方法，你可以在Vue中方便地使用LocalStorage和SessionStorage来进行本地存储操作。 请注意，由于LocalStorage和SessionStorage是基于键值对的存储方式，所以你需要注意键名的唯一性以及数据的格式。此外...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值