本地存储。

矢目

于 2021-07-03 18:25:10 发布

阅读量66

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/qq_48104836/article/details/118443482

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本地存储

特性：

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

window.sessionStorage

特性：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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.onclick=function () {
        //存储数据
        var val=ipt.value;
        sessionStorage.setItem('unm',val);
        sessionStorage.setItem('key',val);
    };
    get.onclick=function () {
        //获取数据
       console.log( sessionStorage.getItem('unm'));
        
    };
    remove.onclick=function () {
        //删除数据
        sessionStorage.removeItem('unm');

    };
    del.onclick=function () {
        sessionStorage.clear();

    };


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

window.localStorage

特性：

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

总结

两种存储方法差不多；
学习不断模仿，摸索着，自己学习；一个初学者的自述

矢目

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储。

本地存储特性：.数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage 约5M、 localStorage 约20M只能存储字符串、可以将对象JSON.stringify()编码后存储window.sessionStorage特性：生命周期为关闭浏览器窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录