JavaScript中的localStorage

简介: JavaScript中的localStorage

JavaScript中的localStorage

参考这篇文章一起学习:JavaScript中的session

案例池子:

JS实现鼠标悬停变色

JavaScript中的排他算法实现按钮单选

JavaScript中的localStorage

JavaScript中的sessionStorage

JavaScript实现网页关灯效果

JavaScript实现一段时间之后关闭广告

JavaScript实现按键快速获取输入框光标

效果展示

概述

简介:localStroage是JavaScript中的,在浏览器中存储数据的一个API,我们通过一个例子演示他的使用方法,它与sessionStorage的区别在于,sessionStorage的声明周期是页面没有关闭,而且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>Document</title>
</head>
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));
        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');
        })  
        del.addEventListener('click', function() {
            localStorage.clear();
        })
    </script>
</body>
</html>
相关文章
|
4月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
|
15天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
16 0
|
6月前
|
存储 JavaScript 前端开发
js中session、cookie、 localStorage和SessionStorage的区别和特点
js中session、cookie、 localStorage和SessionStorage的区别和特点
45 0
|
5月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
7月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(2)
带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage(2)
|
8月前
|
存储 JavaScript 前端开发
js本地存储localStorage和sessionStorage
js本地存储localStorage和sessionStorage
|
10月前
|
存储 JavaScript 前端开发
javascript本地化存储localStorage的实战用法
javascript本地化存储localStorage的实战用法
69 0
|
10月前
|
存储 移动开发 JavaScript
js本地存储(localStorage)和(sessionStorage)
js本地存储(localStorage)和(sessionStorage)
179 0
|
存储 JavaScript 前端开发
JavaScript——localStorage和sessionStorage的使用方法
localStorage和sessionStorage的使用方法
141 0
|
存储 Web App开发 缓存
JavaScript LocalStorage 完整指南
JavaScript LocalStorage 完整指南