localStorage 的实现

绝地灬酷狼 2022-05-25 04:16 123阅读 0赞

localStorage 实现了本地的永久存储；

这一点和sessionStorage不同，后者在会话结束就清除了；

先来看看localStorage的添加，应该是设置，“添加”不准确；

方法：setItem( );

实例：

<!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>localstorage</ title>

</ head>

< body>

< script>

localStorage. setItem( "cvper", "skate and music!");

</ script>

</ body>

</ html>

然后执行这个网页文件，再打开控制台查看：我们可以看到数据已经存储进去，而且是永久存储

![70][]

下面看看如何获取已经存储的数据：

方法：  getItem( )

实例：在上面设置的基础上修改一下

<!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>localstorage</ title>

</ head>

< body>

< script>

*console*. log(localStorage. getItem( "cvper"))

</ script>

</ body>

</ html>

控制台输出  ：skate and music!

再来看看如何删除设置的数据：

方法：removeItem( )

实例：在上面的基础上修改

<!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>localstorage</ title>

</ head>

< body>

< script>

localStorage. removeItem( "cvper");

</ script>

</ body>

</ html>

再去查看localstorage 里面已经没有信息了；

最后一个方法：清除  clear( )  使用： localstoage.clear();   请自行尝试吧。。。

[70]: /images/20220525/b6f5f68fa6fa41c0833aafc5217cc2f1.png

发表评论取消回复

表情：

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

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

相关阅读

相关通过localStorage实现页面的访问量的统计

通过localStorage实现页面的访问量的统计简介： localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对

Myth丶恋晨/ 2024年03月26日 11:07/ 0 赞/ 112 阅读

相关 localStorage

目录 localStorage与sessionStorage localStorage的Set与Get localStorage传递参数 ---------------

迈不过友情╰/ 2023年09月27日 20:06/ 0 赞/ 111 阅读

相关 html+js+localStorage实现简易记事本

简介可保存，下次打开内容不会丢失 <!DOCTYPE html> <html lang="en"> <head> <meta

深碍√TFBOYSˉ_/ 2023年06月10日 03:23/ 0 赞/ 30 阅读

相关 localStorage 的优势

localStorage 的优势 1、localStorage 拓展了 cookie 的 4K 限制。 2、localStorage 会可以将第一次请求的数据直接存储到本

心已赠人/ 2023年02月25日 02:26/ 0 赞/ 18 阅读

相关用Vue实现TodoList，并使用localStorage

TodoList项目总结主要功能：增加Todo项删除Todo项修改Todo项筛选Todo项清除已完成项使用loca

墨蓝/ 2023年01月01日 07:57/ 0 赞/ 255 阅读

相关在vue中实现localStorage

在vue中实现localStorage的思路：对window.localStorage\[key\]对象进行封装，这样就可以实现模块化的思想（实现window.sessionS

墨蓝/ 2022年05月25日 04:47/ 0 赞/ 285 阅读

相关 localStorage 的实现

localStorage 实现了本地的永久存储；这一点和sessionStorage不同，后者在会话结束就清除了；先来看看localStorage的添加，应该

绝地灬酷狼/ 2022年05月25日 04:16/ 0 赞/ 124 阅读

相关 localStorage

localStorage 只能存储字符串，如果要存储对象或者集合，需要将对象和集合使用JSON.stringify()方法转化成JSON字符串；同理在取出的时候要使用JSON.

墨蓝/ 2022年05月22日 01:09/ 0 赞/ 179 阅读

相关 localStorage的使用

[localStorage使用总结][localStorage] 一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个loca

女爷i/ 2022年05月17日 07:20/ 0 赞/ 229 阅读

相关 localStorage

一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决...

灰太狼/ 2021年03月25日 15:45/ 0 赞/ 487 阅读