HTML5新特性之Web存储

最新推荐文章于 2020-03-02 10:20:16 发布

鸣鹿何处寻

最新推荐文章于 2020-03-02 10:20:16 发布

阅读量395

点赞数 1

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/clowns2012/article/details/50917673

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web存储

两种方式
- localStorage:没有时间限制的数据存储
- sessionStorage:针对一个session的数据存储
与cookie的对比
- cookie不适合大量数据的存储，因为它们由每个服务器的请求来传递，这使得cookie速度慢而且效率也不高

localStorage

localStorage 方法存储的数据没有时间限制。也就是说，数据不清空的话，一直可以使用。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStroge</title>
    <script src="app.js"></script>
</head>
<body>
    <textarea style="width: 200px; height: 200px;" id ="ta" ></textarea>
    <button id="btn">save</button>
</body>
</html>

app.js

var ta;
var btn;

window.onload = function(){

    ta = document.getElementById("ta");
    if(localStorage.text){
        ta.value = localStorage.text;
    }
    btn = document.getElementById("btn");
    //onclick btn的点击事件
    btn.onclick = function(){

        //alert(ta.value);
        localStorage.text = ta.value;
    }

}

以上是简单的实现HTML5的新特性Web存储localStorage

sessionStorage

sessionStorage：针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

实现代码

sessionStorage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSessionStroge</title>
    <script src="sessionapp.js"></script>
</head>
<body>
    <span id="txt">0</span>
    <button id="addbtn">Add</button>

</body>
</html>

sessionapp.js

var num = 0;
var txt;

window.onload = function(){
    txt = document.getElementById("txt");
    btn = document.getElementById("addbtn");

    if (sessionStorage.num){

        num = sessionStorage.num;
    }

    btn.onclick = function(){

        num++;
        sessionStorage.num = num;
        showNum();

    }

    function  showNum(){

        txt.innerHTML = num;
    }

}

鸣鹿何处寻

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新特性之Web存储

Web存储两种方式localStorage:没有时间限制的数据存储sessionStorage:针对一个session的数据存储与cookie的对比cookie不适合大量数据的存储，因为它们由每个服务器的请求来传递，这使得cookie速度慢而且效率也不高localStoragelocalStorage 方法存储的数据没有时间限制。也就是说，数据不清空的话，一直可以使用。index.htm
复制链接

扫一扫

专栏目录