本地存储localStorage

最新推荐文章于 2024-03-09 10:52:09 发布

zhangge3663

最新推荐文章于 2024-03-09 10:52:09 发布

阅读量345

点赞数

分类专栏： web前端

原文链接：https://www.cnblogs.com/wuqun/p/6373828.html

版权

web前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

我们可以通过全局属性localStorage访问本地存储功能，该属性返回一个Storage对象，Storage对象用来保存键/值形式的字符串对象

Storage对象有如下属性和方法:

Storage对象可以用来保存键/值对，之中键和值都必须是字符串键必须是唯一的，这意味着如果我们用Storage对象中的setItem方法设置相同的键名的键/值对，后面一个会覆盖掉前面一个，事实上就是后面一个更新了已经存在的键的值。

localStorage案例1(localStorage.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage</title>
<style>

</style>
</head>

<body>
<ul>
    <li>key:<input id="key" type="text" value=""></li>
    <li>value:<input id="value" type="text" value=""></li>
    <li>
        <input id="add" type="button" value="add">
        <input id="clear" type="button" value="clear">
    </li>
    <li id="countmsg">There are <span id="count"></span> items</li>
</ul>
<table id="data"></table>
<script>
    displayData();
    document.getElementById('add').onclick=handleButtonPress;
    document.getElementById('clear').onclick=handleButtonPress;
    function handleButtonPress(e) {
        switch(e.target.id) {
            case 'add':
                var key=document.getElementById('key').value;
                var value=document.getElementById('value').value;
                localStorage.setItem(key, value);
                break;
            case 'clear':
                localStorage.clear();
        }
        displayData();
    }
    function displayData() {
        var tableItem = document.getElementById('data');
        tableItem.innerHTML='';
        var itemCount=localStorage.length;
        document.getElementById('count').innerHTML=itemCount;
        for (var i=0; i<itemCount; i++) {
            var key=localStorage.key(i);
            var val=localStorage[key];
            tableItem.innerHTML+='<tr<th>'+key+'</th><td>'+val+'</td></tr>';
        }
    }
</script>
</body>
</html>

预览效果:

该案例，当点击add按钮时会将数据添加到本地存储中，当按下clear按钮时则清除本地存储中的内容;

在未清除的情况下，我们在相同的浏览器下访问上面的案例，可以看到刷新浏览器数据还是存在的，关闭浏览器重新访问上面的案例数据一样的还是存在的。同源文档(下面说的所有同源文档都是在相同浏览器下访问的指协议域名ip相同的页面)也可以访问上面案例所存储的数据

浏览器不会删除我们用localStorage添加的数据(永久存储),除非用户自己清楚浏览器。(规范还允许数据因为安全原因被移除，但并没有说明什么样的安全原因需要删除本地数据)

监听存储事件

通过本地存储功能保存的数据对所有来源相同的文档都是可用的，某个文档对本地存储进行修改会触发storage事件，我们可以监听其他同源文档上的这个事件来确保我们跟上最新变化，

与storage事件同时指派的对象是一个StorageEvent对象，它的成员如下表:

如下案例会监听并编录本地存储对象上触发的事件(storage.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table id="data">
    <tr>
        <th>key</th>
        <th>oldValue</th>
        <th>newValue</th>
        <th>url</th>
        <th>storageArea</th>
    </tr>
</table>
<script>
    var tableItem=document.getElementById('data');
    window.onstorage=handleStorage;
    function handleStorage(e) {
        var row='<tr><td>'+ e.key+'</td><td>'+e.oldValue+'</td><td>'+e.newValue+'</td><td>'+e.url+'</td><td>'+(e.storageArea==localStorage)+'</td><tr>';
        tableItem.innerHTML+=row;
    }
</script>
</body>
</html>

在相同的浏览器下同时访问上面两个案例时，在第一个案例每添加或者修改或者clear，都会立马在第二案例中展现出来，注意不能刷新第二案例的，否则第二个案例会无数据。

注意: storage事件不会在制造变化的文档内指派，只在其他同源文档里可用。

zhangge3663

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储localStorage

我们可以通过全局属性localStorage访问本地存储功能，该属性返回一个Storage对象，Storage对象用来保存键/值形式的字符串对象Storage对象有如下属性和方法:Storage对象可以用来保存键/值对，之中键和值都必须是字符串键必须是唯一的，这意味着如果我们用Storage对象中的setItem方法设置相同的键名的键/值对，后面一个会覆盖掉前面一个，事实上就是后面一个更新了已经存在的键的值。localStorage案例1(localStorage.html):<
复制链接

扫一扫