HTML5 Web存储 sessionStorage localStorage

曾经终败给现在 2022-07-19 06:36 255阅读 0赞

sessionStorage :浏览器关闭会清除  
localStorage：长时间保存

api一致：

## 代码： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js"></script>
    </head>
    <body>
    姓名：<input type="text" id="userName"><br>
    手机号：<input type="text" id="userPhone"><br>
    <input type="button" id="save" onclick="save()" value="保存"><br>
    <input type="text" id="findOfPhone" placeholder="输入手机号查询："><br>
    <input type="button" value="查询" onclick="find()">
    <div id="findShow"></div>
    <input type="button" value="查询所有" onclick="findAll()"><br>
    <div id="findAllDiv"></div>
    <input type="button" onclick="clearTest()" value="清除所有">
    <script> function save(){ var userName=$("#userName").val(); var userPhone=$("#userPhone").val(); localStorage.setItem(userName,userPhone);//存储的信息不能跨浏览器 } function find(){ var key=$("#findOfPhone").val(); var context=localStorage.getItem(key); $("#findShow").html(context+"<br>"+$("#findShow").html()) } function findAll(){ if(localStorage.length<=0){ alert("数据为空") }else { var str=""; for(var i=0;i<localStorage.length;i++){ var key=localStorage.key(i); var context=localStorage.getItem(key); str+=context+"<br>"; } $("#findAllDiv").html(str); } } $("#findOfPhone").keyup(function () { find(); }) function clearTest(){ localStorage.clear(); } </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Web存储数据(localStorage,sessionStorage)

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

布满荆棘的人生/ 2023年10月17日 11:46/ 0 赞/ 19 阅读

相关 HTML5本地存储localStorage，sessionStorage

HTML5新特性，用于本地存储， localStorage：不删除会一直存在斯基 sessionStorage：浏览器关掉，就跪了 / H5:数据存储

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 09:11/ 0 赞/ 24 阅读

相关 HTML5本地存储 LocalStorage和SessionStorage

了解HMLT5的同学，对本地存储的强大功能应该都不会陌生，因为它比之前的cookie和session实在是好用太多了。。。 Cookies的用法相对比较麻烦，并且还有个

拼搏现实的明天。/ 2022年09月28日 13:25/ 0 赞/ 248 阅读

相关 HTML5 Web存储 sessionStorage localStorage

sessionStorage :浏览器关闭会清除 localStorage：长时间保存 api一致：代码： <!DOCTYPE html> <h

曾经终败给现在/ 2022年07月19日 06:36/ 0 赞/ 256 阅读

相关 Web存储（localStorage与sessionStorage）

本文原创地址链接：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/53526842][http_blog.csd

以你之姓@/ 2022年07月14日 12:11/ 0 赞/ 180 阅读

相关 web存储 localStorage与sessionStorage

`Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限

短命女/ 2022年07月14日 08:47/ 0 赞/ 164 阅读

相关 web 本地存储（localStorage、sessionStorage）

版权声明：转载请注明原文地址 https://blog.csdn.net/mjzhang1993/article/details/70820868 目录[(?)][Link

蔚落/ 2022年05月27日 12:20/ 0 赞/ 252 阅读

相关 HTML5之localStorage、sessionStorage

一、localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除没有时间限制的数据存储（一）设置值 1.　　localStor

你的名字/ 2022年04月17日 03:10/ 0 赞/ 502 阅读

相关 HTML5 Web 存储（localStorage和sessionStorage）

[原文链接][Link 1] HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值

Love The Way You Lie/ 2021年12月01日 13:26/ 0 赞/ 288 阅读

相关 HTML5 localStorage and sessionStorage

TML5 提供两种web存储方法，localStorage 与 sessionStorage localStorage 与 sessionStorage 区别

忘是亡心i/ 2021年10月08日 06:52/ 0 赞/ 356 阅读