HTML5 Web存储数据(localStorage,sessionStorage)

最新推荐文章于 2023-04-12 18:14:25 发布

原创最新推荐文章于 2023-04-12 18:14:25 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了两种Web存储技术：localStorage和sessionStorage。localStorage用于长期存储数据，即使浏览器重启数据也依旧保留；而sessionStorage则用于存储单次会话数据，当浏览器关闭时数据会被清除。通过示例代码展示了如何使用这两种技术进行数据存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Web 储存新方法:

（1）localStorage :没有时间限制的数据存储（与浏览器无关，不管何时打开数据依然存在!）

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入脚本-->
    <script type="text/javascript" src="my.js"></script>
</head>
<body>
  <textarea id="ta" style="width: 200px; height: 200px"></textarea>
<button id="btn">save</button>
</body>
</html>

my.js

/**
 * Created by Administrator on 2017-03-20.
 */
var ta,btn;
// 加载事件
window.onload=function(){
    ta = document.getElementById("ta");
    btn = document.getElementById("btn");

    //判断是否不为空，则就将数据放入的ta.value中
    if(localStorage.text){
        ta.value=localStorage.text;
    }

    //注意：localStorage保存的数据没有时间限制
    //按钮单击事件
    btn.onclick=function(){
     //   alert(ta.value);
        localStorage.text=ta.value; //将文本数据存入到本地
    }

}

效果：（右键|检查|选择Application）

（2）sessionStorage :针对一个session的数据存储;(当浏览器关闭之后，数据就会被删除)

session.html

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

session.js

/**
 * Created by Administrator on 2017-03-20.
 */
var number=0;
var txt,btn;

//加载事件
window.onload=function(){

    //获得文本对象
    txt= document.getElementById("txt");
    btn= document.getElementById("btn");

    //判断是否存在
    if(sessionStorage.number){
        number =sessionStorage.number;
    }else{
        number=0;
    }

    //单击按钮累计number
    btn.onclick=function(){
        number++;  //累计
        sessionStorage.number = number; //用会话保存当前累计的数字
        txt.innerHTML=number; //将累计的值赋给文本
    }
}

效果：（右键|检查|选择Application）