web储存

最新推荐文章于 2023-06-17 00:21:47 发布

AndyJson

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量449

点赞数

分类专栏： HTML5 文章标签：数据存储

本文链接：https://blog.csdn.net/AndyJson/article/details/51849360

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一客户端存储数据的新方法

两种方式
LocalStorage 没有时间限制的数据存储
SessionStorage 针对一个session的数据存储

与cookie做对比，之前，这些都是由cookie完成。但是cookie不适合大量数据的存储，因为他们由每个服务器的请求来传递，这使得速度很慢而且效率也不高

二 localStorage方法

存储特点
LocalStorage方法存储的数据没有时间限制

实例

Html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="localStorage.js"></script>
</head>
<body>
    <textarea id="ta" rows="5" cols="100"></textarea>
    <button id="btn">save</button>
</body>
</html>

Js部分

var ta,btn;

window.onload=function(){
    ta=document.getElementById("ta");
    btn=document.getElementById("btn");
    if(localStorage.text){
        ta.value=localStorage.text;
    }
    btn.onclick=function(){
        localStorage.text=ta.value;
    }
}

三 sessionStorage方法

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

计数实例

html部分

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

Js部分

var txt,addBtn;
var num=0;

window.onload=function(){
    txt=document.getElementById("txt");
    addBtn=document.getElementById("addBtn");
    if(sessionStorage.num){
        num=sessionStorage.num;
    }else{
        num=0;
    }
    addBtn.onclick=function(){
        num++;
        sessionStorage.num=num;
        showNum();
    }
}

function showNum(){
    txt.innerHTML=num;
}

AndyJson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web储存

一客户端存储数据的新方法两种方式 LocalStorage 没有时间限制的数据存储 SessionStorage 针对一个session的数据存储与cookie做对比，之前，这些都是由cookie完成。但是cookie不适合大量数据的存储，因为他们由每个服务器的请求来传递，这使得速度很慢而且效率也不高二 localStorage方法存储特点 LocalStorage方法存储的数据没有时间限制
复制链接

扫一扫

专栏目录