JS-数据存储

最新推荐文章于 2024-09-09 09:35:48 发布

kuiini

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量351

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/kuiini/article/details/137711710

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

三、数据存储

1、本地存储

本地存储特性

数据储存在用户浏览器中
设置、读取方便，页面刷新不丢失数据
容量较大，sessionStorage约5M、localStorage约20M
只能存储字符串，可以将对象JSON.stringify() 编码后存储

2、window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用

存储数据：
sessionStorage.setItem(key, value);

获取数据：
sessionStorage.getItem(key);

删除数据：
sessionStorage.removeItem(key);

删除所有数据:
sessionStorage.clear();

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <input type="text">
   <button class="set">存储数据</button>
   <button class="get">获取数据</button>
   <button class="remove">删除数据</button>
   <button class="del">清空所有数据</button>

   <script>
       var ipt = document.querySelector('input');
       var set = document.querySelector('.set');
       var get = document.querySelector('.get');
       var remove = document.querySelector('.remove');
       var del = document.querySelector('.del');
       set.addEventListener('click', function() {
           var val = ipt.value;
           sessionStorage.setItem('name', val);
           sessionStorage.setItem('password', val);
       });
       get.addEventListener('click', function() {
           console.log(sessionStorage.getItem('name'));
       });
       remove.addEventListener('click', function() {
           sessionStorage.removeItem('name');
       });
       del.addEventListener('click', function() {
           sessionStorage.clear();
       });

   </script>
</body>
</html>