HTML5学习笔记17-Web存储

最新推荐文章于 2020-02-07 11:53:42 发布

RonnyZhao

最新推荐文章于 2020-02-07 11:53:42 发布

阅读量241

点赞数

分类专栏：学习笔记文章标签： web 存储 localStorage

本文链接：https://blog.csdn.net/qq_19919127/article/details/54909833

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、web存储数据的两种方式

localStorage-没有时间限制的数据存储

sessionStorage-针对一个session的数据存储（页面关闭时清楚数据）

与cookie对比：cookie不适合做大量数据的存储，速度慢且效率不高。

2、localStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea style="width: 200px;height: 200px" id="mytxt"></textarea>
    <button id="mybtn">保存</button>
    <script>
        var mytxt;
        var mybtn;
        window.οnlοad=function () {
            mytxt=document.getElementById("mytxt");

            if(localStorage.text){
                //不为空时
                mytxt.value=localStorage.text;
            }
            mybtn=document.getElementById("mybtn");
            mybtn.οnclick=function(){
                //alert(mytxt.value);
                localStorage.text=mytxt.value;
            }
        }
    </script>
</body>
</html>

3、sessionStorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span id="txt">0</span>
    <button id="mybtn">Add</button>
    <script>
        var myspan;
        var mybtn;
        var num=0;
        window.οnlοad=function () {
            myspan=document.getElementById("txt");
            mybtn=document.getElementById("mybtn");
            if(sessionStorage.num){
                num=sessionStorage.num;
                showNum();
            }else{
                num=0;
            }
            mybtn.οnclick=function () {
                num++;
                sessionStorage.num=num;
                showNum();
            }
        }

        function showNum(){
            myspan.innerHTML=num;
        }
    </script>
</body>
</html>

RonnyZhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记17-Web存储

1、web存储数据的两种方式localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储（页面关闭时清楚数据）与cookie对比：cookie不适合做大量数据的存储，速度慢且效率不高。2、localStorage Title 保存 var my
复制链接

扫一扫