JavaScript中级 ---- 本地存储

最新推荐文章于 2024-05-05 22:05:46 发布

wyn314

最新推荐文章于 2024-05-05 22:05:46 发布

阅读量239

点赞数

分类专栏： js 中级文章标签： javascript cookie session使用场景介绍 local 存储

本文链接：https://blog.csdn.net/csdnwyn314/article/details/76999975

版权

js 中级专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 本地存储方式

cookie – HTML4 在客户端保存诸如用户名等简单信息

cookie存在的问题

大小：大小被限制在4K;
带宽： cookie是随http一起发送，会浪费一部分发送cookie时使用的带宽
复杂性：正确操作cookie有难度

HTML5中的客户端本地保存数据

sessionStorage 保存从进入网站到浏览器关闭这段时间内的所有数据 — 临时保存

1.保存数据的方法（两种）：
sessionStorage.setItem('key','value');
sessionStorage.key = 'value';
2.读取数据的方法（两种）：
变量 = sessionStorage.getItem('key');
变量 = sessionStorage.key';

localStorage 保存在客户端本地硬件设备中 —– 永久保存

注意： localstorage中的数据关闭浏览器后也存在，但是数据保存是按不同浏览器分别进行保存的，也就是说打开一种浏览器读取不到另一种浏览器中保存的数据。

1.保存数据的方法（两种）：
sessionStorage.setItem('key','value');
sessionStorage.key = 'value';
2.读取数据的方法（两种）：
变量 = sessionStorage.getItem('key');
变量 = sessionStorage.key';

2. localstorage的应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简易数据库</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div style="width: 80%; margin: 0 auto">
    <h1 class="navbar navbar-inverse" style="color: #fff;">WEB storage 做简易数据库</h1>
    <table>
        <tr>
            <td>姓名</td>
            <td><input type="text" id="name"/></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" id="email"/></td>
        </tr>
        <tr>
            <td>电话号码</td>
            <td><input type="text" id="tel"/></td>
        </tr>
        <tr>
            <td>备注</td>
            <td><input type="text" id="memo"/></td>
        </tr>
        <tr>
            <td></td>
            <td><button onclick="saveStorage()">保存</button></td>
        </tr>
    </table>
    <hr/>
    <p>检索：
        <input type="text" id="find"/>
        <button onclick="findStorage('msg')">检索</button>
    </p>
    <p id="msg">在这里添加检索内容</p>
</div>


<script>
    function saveStorage(){
        var data = new Object;
        data.name = document.getElementById('name').value;
        data.email = document.getElementById('email').value;
        data.tel = document.getElementById('tel').value;
        data.memo = document.getElementById('memo').value;
        var str = JSON.stringify(data);
        localStorage.setItem(data.name,str);
        alert('数据已保存');
    }

    function findStorage(id){
        var find = document.getElementById('find').value;
        var str = localStorage.getItem(find);
        var data = JSON.parse(str);
        var result = "姓名："+ data.name +'<br>';
        result +=  "邮箱：" + data.email +'<br>';
        result +=  "电话号码" + data.tel +'<br>';
        result +=  "备注：" + data.memo +'<br>';

        var target = document.getElementById(id);
        target.innerHTML = result;
    }
</script>
</body>
</html>

wyn314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中级 ---- 本地存储

1. 本地存储方式 cookie – HTML4 在客户端保存诸如用户名等简单信息 cookie存在的问题大小：大小被限制在4K; 带宽： cookie是随http一起发送，会浪费一部分发送cookie时使用的带宽复杂性：正确操作cookie有难度 HTML5中的客户端本地保存数据 sessionStorage localSto
复制链接

扫一扫

专栏目录