localStorage 的实现

最新推荐文章于 2024-07-01 15:30:29 发布
最新推荐文章于 2024-07-01 15:30:29 发布
阅读量506 收藏
点赞数
分类专栏： HTML 文章标签： localstorage 方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/80233897
版权

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>


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



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

方法：  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();   请自行尝试吧。。。




cvper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
PHP 如何操作localStorage,localstorage用法是什么
weixin_36102930的博客
03-13 1228
localstorage用法：1、localStorage拓展了cookie的4K限制；2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的，针对于前端页面的数据库。【相关文章推荐：vue.js】localstorage用法：一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要...
php实现localStorage
phpstory的博客
09-08 1028
一、在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个。
本地存储方法之localStorage存储的使用
最新发布
Salted fish in hand, I have the world.
07-01 565
本地存储有三种方法，分别是什么呢？有localStorage、sessionStorage、和cookie三种方法localStorage方法的使用在使用本地存储之前我们先看一下localStorage它是一个什么登录后复制 //在使用之前先看一下localStorage是一个什么 console.log(localSt...
php localstorage,本地存储 localStorage 和 sessionStorage 和 cookie
weixin_29117805的博客
03-24 296
![](https://img.kancloud.cn/98/f8/98f860bf67946e1789af84b228306b49_722x429.png)## 设置cookie```function setCookie(name,value) {var Days = 30;var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*6...
PHP 如何操作localStorage,localStorage与sessionStorage该如何使用
weixin_34526348的博客
03-24 622
这次给大家带来localStorage与sessionStorage该如何使用，怎样使用localStorage与sessionStorage？使用localStorage与sessionStorage的注意事项有哪些，下面就是实战案例，一起来看一下。一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地...
php读取localstorage,localStorage存储读取JSON怎样实现
weixin_30568317的博客
03-11 342
这次给大家带来localStorage存储读取JSON怎样实现，localStorage存储读取JSON的注意事项有哪些，下面就是实战案例，一起来看一下。localStorage是HTML5提供的再客户端实现本地存储的一种方法，但是localStorage方法只能存储字符串数据，有时候我们需要存储对象到本地比如：JSON；那么，localStorage怎么才能实现JSON数据的存储与读取呢？思路：...
localstorage实现带过期时间的缓存功能
10-16
在本文中，我们将重点关注如何利用`localStorage`实现带过期时间的缓存功能。`localStorage`是一个持久化的存储空间，它与`cookie`和`sessionStorage`相比有其独特的优势和限制。 首先，`cookie`虽然能在过期时间...
localStorage实现便签小程序
09-01
在本文中，我们将深入探讨如何使用`localStorage`来实现一个简单的便签小程序。`localStorage`是Web Storage API的一部分，它允许我们在浏览器端持久地存储数据，这对于构建离线应用程序或需要在用户会话之间保留...
JS localStorage实现本地缓存的方法
12-09
本篇将详细讲解如何利用 `localStorage` 实现本地缓存，并通过提供的代码示例进行解析。 首先，我们来看 `localStorage` 的基本用法。`localStorage` 是一个全局对象，它提供了两个主要方法：`setItem()` 和 `...
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
10-15
Localstorage是Web应用存储数据的一种方法，它允许开发者在浏览器中持久化地存储键值对数据，这对于实现用户状态管理，尤其是登录状态的维护非常有用。 首先，我们来看一下登录界面的HTML结构。在这个例子中，使用...
php 获取localstorage,浅谈localStorage的本地存储
weixin_39976166的博客
03-10 2206
我们在做页面时会用到本地存储的时候，今天说说localStorage本地存储。1、localStorage.name="老王"; //第一种设置存储本地数据的方法localStorage2、localStorage.setItem("color","red"); //第二种设置存储本地数据的方法3、localStorage.removeItem("name"); //删除本地存储数据...
话说localStorage的实现
高雄的专栏
12-09 2897
Chrome实现localStorage与WebKit实现的方式差异很大，但是到了最底层数据库的存储还是走到了一起。 如果只是通过WebKit实现localStorage的话需要做一些具体的工作： 1. 首先让webview实例知道localStorage存储的具体位置，这个位置在WebKit based的浏览器中是默认在%AppData%\Local\Apple Computer\W
模拟实现一个 localStorage
qq_40146880的博客
01-26 933
使用indexedDB 模拟实现一个基础的 localStorage 进入正文之前我们先来了解一下，indexedDB的几个基础操作。 IDBOpenDBRequest：IndexedDB API的接口使用特定的事件处理程序属性，提供对打开或删除数据库（使用IDBFactory.open和执行IDBFactory.deleteDatabase）的请求结果的访问。 我们可以通过indexedDB...
LocalStorage在Chrome里的实现
jggyff的博客
11-17 4176
LocalStorage在Chrome里的实现
java localstorage_localstorage 必知必会
weixin_42503446的博客
02-13 454
HTML APIlocalstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期。基本...
localStorage持久化存储的实现方式
Betty_666的博客
11-21 386
localStorage的实现方式
php 写入localstorage,利用php实现一周之内自动登录存储机制（cookie、session、localStorage）...
weixin_32508515的博客
03-22 407
cookie、session、localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧.1.cookie用来存储用户相关数据，存储的位置在用户本地：首先是登录界面定义:?上面的代码大家都懂吧,就是一个表单.然后就是action的server.php服务器处理,?上面加载了一个data.php其实里面就是一条数据,?这个数据主要是核...
php如何调用localstorage,在nuxt中使用localStorage
weixin_39759182的博客
03-25 612
原文作者：Growth61原文链接：https://zhuanlan.zhihu.com/p/82481387使用 localStorage 进行缓存，操作比 cookie 更简单，且存储空间更大，用 vue.js 使用 localStorage 没什么问题，但是用 nuxt.js 使用 localStorage 就出现报错，因为服务端在寻找 localStorage，而其只存在于浏览器中。虽然使...
自己封装myLocalStorage，使其有有效期
不营养、的博客
07-26 669
项目中遇见 cookie 值存不上，what fuck？什么情况，不知道。用 $.cookie 和原生的 cookie 都不行，存上值，就被删了一样。找不见地方。考虑到项目比较大，去找得代价，还不如换种实现方式，于是就想起来用 localStorage 了。然后 localStorage 又不像 $.cookie 那样有过期时间。因此需要自己去封装一下，故而，有了这个一个博客。勿喷！ 调用方...
localStorage实现用户登录
06-01
localStorage 是浏览器提供的本地存储方式之一，可以将用户登录信息存储在 localStorage 中，从而实现用户登录。以下是一个简单的实现示例： 在用户登录成功后，将用户信息存储到 localStorage 中： ```javascript...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值