保存用户信息sessionStorage和loaclStorag两者的区别和用法

最新推荐文章于 2022-12-26 11:15:51 发布

神奇代码

最新推荐文章于 2022-12-26 11:15:51 发布

阅读量1.1k

点赞数 2

分类专栏： localstorage 文章标签： servlet 服务器前端

本文链接：https://blog.csdn.net/weixin_46891264/article/details/125829666

版权

localstorage 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先来看下浏览器提供的三种Stroage模式，每个浏览器中都自带，以谷歌浏览器为例，点击屏幕右键->检查->Application

1.loaclStorag的意思和用法

1.通常程序员用来测试存储客户端用户的信息对象：测试用

2.同一个浏览器下不同的页面都可以获取到loaclStoragd的值：数据可以共享

3.这些信息将永久保存到浏览器上，只能手动删除loaclStorag的值：数据永久有效，只能手动删除

1.临时用来存储客户端用户的信息对象语法 localStroage.setItem( ' token ', ' Bearer xxxxx ')

token为标识符，Bearer xxxxx ；Bearer 后面随机生成的字符长

<body>
  <form action="#" id="from">
    <p>账号</p>
    <input type="text" class="account" value="">
    <p>密码</p>
    <input type="password" class="pad" value="">
    <button onclick="btn()">提交</button>
  </form>

  <script>
    //原生JS获取两个input标签
    var account = document.querySelector('.account');
    var pad = document.querySelector('.pad')

    //测试绑定事件 点击btn()拿到两个input的值
    function btn() {
      console.log(account.value)
      console.log(pad.value)

      // 假设:账号与密码都是123，登录成功后将服务器token保存本地localStroage
      if (account.value == '123' && pad.value == 123) {
        alert('登录成功')

        //模拟服务器生成的token:Bearer是固定语法后面是随机生成的字符串,保存到本地
        localStorage.setItem('token', 'Bearer xxx,,,xxx')
      }
    }
  </script>
</body>

本地localStorage已保存我们自己模拟的token,在aplication中 Local Stroage中查看 Key和 Value；

Key 和 Value值就是我们在localStorage.setItem('token', 'Bearer xxx,,,xxx')设置的值。

我们现在关闭网页，然后重新打开本网页，不需要验证账号和密码就发现我们保存到localStorage的token值还存在，如果不手动删除，只要你打开本网页 token将永远保存到本地浏览器上Local Storages上

2.在同一个浏览器上，现在我们新建一个网页，在网页中放一个按钮，访问和获得本地Local Storage的值; 语法 localStorage( )

3:现在我们删除储存在本地的Local Storage，语法localStorage.removeItem(),删除后我们刷新此网页就看不到key 和 value的值了

<script>
    //原生JS获取两个input标签
    var account = document.querySelector('.account');
    var pad = document.querySelector('.pad')

    //测试绑定事件 点击btn()拿到两个input的值
    function btn() {
      console.log(account.value)
      console.log(pad.value)

      // 假设:账号与密码都是123，登录成功后将服务器token保存本地localStroage
      if (account.value == '123' && pad.value == 123) {
        alert('登录成功')

        //模拟服务器生成的token:Bearer是固定语法后面是随机生成的字符串,保存到本地
        localStorage.setItem('token', 'Bearer xxx,,,xxx')
      }
    }

    //绑定新事件 remove() 删除localstorage
    function remove() {
      localStorage.removeItem('token')
    }
  </script>

2. sessionStorage的意思和用法

1.session英语意思是某项活动的一段时间，也就是说sessionStorage存储的值和页面生命周期有关，页面关闭后sessionStorage会自动销毁token值，又称为会话存储

2.同一个浏览器下不同的页面不能获取到sessionStorage的值

3.使用json.stringfy()存储json对象,json.parse()还原json对象