H5本地离线存储

最新推荐文章于 2024-01-03 18:07:46 发布

Friday--星期五

最新推荐文章于 2024-01-03 18:07:46 发布

阅读量442

点赞数

分类专栏： HTML 笔记文章标签： html js html5 javascript css3

本文链接：https://blog.csdn.net/qq_45644092/article/details/105342374

版权

HTML 笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本地离线存储

localStorage长期存储数据，浏览器关闭后数据不丢失，相同浏览器的不同页面间可以共享相同的 localStorage，除非主动删除数据
sessionStorage数据存储在关闭浏览器之前，浏览器关闭后数据自动删除。
1.相同的使用方法,API基本是一样的
(1) localStorage API:
a.使用setItem设置储存内容:
localStorage.setItem(“name”,“123”)
localStorage.name = “123”;
localStorage[‘name’] = “123”
b.使用getItem获取储存内容:
localStorage.getItem(“name”)
localStorage.name
c.使用removeItem删除储存内容(删除指定key):
localStorage.removeItem(“name”)
d.使用clear方法清除储存内容(清除所有key):
localStorage.clear();
e.使用length属性,获取储存的key个数
localStorage.length
(2) sessionStorage API:基本和localStorage差不多
使用前判断浏览器是否支持:
    var storage = null;
        if(window.localStorage){              //判断浏览器是否支持localStorage
           storage = window.localStorage;     
           storage.setItem("name", "张三");    //调用setItem方法，存储数据
           alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 张三
           storage.removeItem("name");     //调用removeItem方法，移除数据
           alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
      }

示例：为了验证，准备了两个html文件，一个是index.html，另一个是text.html。
index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>
</head>
<body>
  <input type="button" value="登录" onclick="submit()" />
  <input type="text" name="text" id="text" />
  <input type="button" value="显示" onclick="shows()" />
  <!-- 测试时根据它们的区别显示或关闭text.html页面-->
  <a href="text.html" target="_blank">点击打开</a>
  <script>
    function submit() {
      var str = document.getElementById("text").value.trim();
      setInfo(str);
      document.getElementById("text").value = "";
    }
    //储存数据
    function setInfo(name) {
      var storage = window.sessionStorage;
      var localStorage = window.localStorage;
      storage.setItem('name', name);
      localStorage.setItem('name', name);
    }
    //显示数据
    function shows() {
      var storage = window.sessionStorage;
      var str = "我的名字是 " + storage.getItem("name");
      document.getElementById("text").value = str;
    }
  </script>
</body>
</html>

text.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
</head>
<body>
  <script>
    var storage = window.sessionStorage;
    alert(storage.getItem("name"));
  </script>
</body>
</html>

当点击show按钮后，输入框内显示 “ 我的名字是 null“，此时sessionStorage中没有存储键值为 ”name“的数据。当在文本中输入”张三“后，点击login按钮，输入框清空的时候数据已经存储到sessionStorage中，然后再去点击show按钮，会显示”我的名字是张三“。此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”我的名字是张三“

在当前页面打开的链接，是可以访问到sessionStorage内的数据。后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面或者直接关闭浏览器，才可以消除sessionStorage中的数据。

使用本地储存注意点:

存储容量超出限制,会抛出QuotaExceededError异常. 解决:储存时应使用try catch 避免异常未捕获
储存类型的限制,只能储存字符串
sessionStorage同一个url路径下,不同标签页不能共用储存内容.

如:我在a.html页面储存name,我打开另一个新标签,输入a.html的地址,则获取不到储存的name
存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。
以下是它的常用应用场景：
   var userData = {
       name : '张三',
       age: 24
   }
   localStorage.setItem('userDate', JSON.stringify(userData));
   var newUserData = JSON.parse(localStorage.getItem('userData')); 
另外，浏览器提供了storage事件来监听存储,
  window.addEventListener('storage', showStorageEvent, true)

Friday--星期五

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5本地离线存储

本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失，相同浏览器的不同页面间可以共享相同的 localStorage，除非主动删除数据sessionStorage数据存储在关闭浏览器之前，浏览器关闭后数据自动删除。1.相同的使用方法,API基本是一样的(1) localStorage API:a.使用setItem设置储存内容:localStorage.setI...
复制链接

扫一扫