HTML 5本地存储 localStorage与 sessionStorage + 实例

最新推荐文章于 2024-10-30 21:10:40 发布

原创最新推荐文章于 2024-10-30 21:10:40 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#localStorage与sessionStorage #HTML5本地存储

HTML5基础专栏收录该内容

25 篇文章

订阅专栏

本文深入解析HTML5 WebStorage机制，对比cookie，阐述其优势如更大的存储空间、数据安全性及丰富的接口。详细介绍了localStorage和sessionStorage的区别与应用，包括数据的保存、读取、删除等操作，以及如何利用WebStorage统计网站访问人数。

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

什么是Web Storage?

HTML5本地存储的前身是cookie,但它存在一些缺点。HTML5中则提出了
Web Storage 的概念。

Web Storage优势：
● 存储空间更大，可以存储5MB大小的数据
● 内容不会发送到服务器
● 更丰富的接口
● 独立的存储空间

Web Storage实际由两部分组成：localStorage（取代了globalStorage）和 sessionStorage

●localStorage

用于持久化的本地存储，除非手动删除，否则永远不会过期

判断浏览器是否支持

function getLocalStorage(){
        try{
            if(window.localStorage)
            {
                return window.localStorage;
            }
        }catch(e){
            return undefined;
        }
    }

localStorage的常用方法

● setItem()      用来保存数据。两个字符串类型的参数：key和value（键值对）
● getItem()      用来读取数据。传入setItem()中的key
● removeItem()      删除单个指定的数据。将key传入
● clear()      直接调用清空所有的数据
● key()      获取指定下标键的名称

获取localStorage对象

 var localStorage = getLocalStorage();

保存数据

用setItem()方法或者直接用localStorage.key来保存

 localStorage.setItem('name','cnblogs');// key value 
  localStorage.setItem('age','23');
  localStorage.hobby = 'dance';

获取数据

直接用localStorage.key来获取，也可以用localStorage.getItem()来获取

    alert(localStorage.name + '今年' + localStorage.age + '岁,他的爱好是:'+localStorage.hobby);
    alert(localStorage.getItem("name") + '今年' +localStorage.getItem("age") + '岁，他的爱好是' + localStorage.getItem("hobby") );

用key()方法获取指定下标键的名称的值

    var  val0 = localStorage.key(0); // 0是age  1是hobby  2是name
    alert(val0);// age
    var val1 = localStorage.key(1);
    alert(val1); // hobby
    var val3 = localStorage.key(2);
    alert(val3); // name

移除某个指定的数据

 localStorage.removeItem("hobby");
 alert(localStorage.hobby);// undefined

清空数据库

    localStorage.clear();

实例：统计访问人数
当在同一个浏览器中打开多个网页时数据也会发生变化，会触发onstorage 事件

使用storage事件的event对象的属性可以得到localStorage对象修改前后的值

常用的storage事件对象的属性

1:key 被修改过得键
2:oldVaule 修改前的键值
3:newVaule 修改后的键值
4:url 触发当前存储事件的页面URL地址
5:storageArea 表示存储类型，到底是session还是local

在这里插入图片描述
每刷新一次增长一次

<script>
    /*
        保存的数据的文件都是以.localstorage后缀名结束的，实际是一个SQLite文件，可以使用SQLite打开，并且看到其中的数据。
    */
    showVisitNumber();
    function showVisitNumber(){
        // 判断是否支持
        var localStorage = getLocalStorage();
        if(localStorage.getItem('countNumber'))// 不为空加1
        {
            localStorage.setItem('countNumber',Number(localStorage.getItem("countNumber"))+ 1);
            // Number()方法直接将对象转为数字，不能转换的为NaN
        }
        else{
            localStorage.setItem("countNumber","1");// 为空置为1
        }
        document.getElementById("show").innerHTML = '您是第'+ localStorage.getItem('countNumber')+'个访问该页面的人数'
         
    }
    /*
        当打开多个页面访问同一个地址时，网页并不会随着其他的页面的刷新及时的更改获取最新的访问人数。这就要添加onstorage事件。
    */
    // 监听事件
    // 当数据真的发生变化就会触发onstorage事件
    if(window.addEventListener){
        window.addEventListener('storage',storageHead);
    }
    else{
        window.attachEvent('onstorage',storageHead)
    }
    function storageHead(event) {
        //var event = event || window.event;
       document.getElementById("show").innerHTML = '您是第'+ localStorage.getItem('countNumber')+'个访问该页面的人数';
    }
    function getLocalStorage(){
        try{
            if(window.localStorage)
            {
                return window.localStorage;
            }
        }catch(e)
        {
            return undefined;
        }
    }
</script>

●sesstionStorage

与localStorage不同的是，使用sessionStorage对象存储的数据只用在同一个回话中的页面才能访问并且当回话结束之后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是回话级别的存储。

注意：sessionStorage的方法与事件与localStorage一样

案例：一个登录效果

运用localStorage存储用户名，用sessionStorage存储密码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sessionStorage对象的使用</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .box{
            width: 400px;
            height: 100px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 10px;
        }
        .box>div{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>用户：<input id="user" type="text"></div>
       <div> 密码：<input id="pass" type="password"></div>
    </div>
</body>
</html>
<script>
    function getStorageType(type){
       try{
        if(window.type)
        {
            return window.type;
        }
       }catch(e)
       {
           return undefined;
       }
    }
    var sessionStorage = getStorageType(sessionStorage);
    var localStorage = getStorageType(localStorage);
    var user = document.getElementById('user'),
        pass = document.getElementById('pass');
    user.value = localStorage.getItem('userName');
    pass.value = sessionStorage.getItem('userpass');
    // 分别为用户名和密码框添加onkeyup事件 用来存储数据
    user.onkeyup = function(){
        localStorage.setItem('userName',this.value);// 用localStorage对象来存储用户名
    }
    pass.onkeyup = function(){
        sessionStorage.setItem('userpass',this.value);// 用sessionStorage对象来存储密码
    }
</script>

在这里插入图片描述