Javascript本地存储localStorage看这一篇就够了

更新时间：2024年07月30日 11:30:55 作者：听海边涛声

这篇文章主要给大家介绍了关于Javascript本地存储localStorage的相关资料,localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,需要的朋友可以参考下

介绍

数据存储在用户浏览器中，其实是保存在硬盘中
页面刷新不丢失数据
sessionStorage和localStorage约 5M 左右

localStorage ：

使用localStorage 可以将数据永久存储在本地电脑中, 除非手动删除，否则关闭页面也会存在。
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用

存储数据到localStorage

语法

localStorage.setItem(key, value)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
  </script>
</body>

</html>

打开另外一个页面，localStorage保存的信息照样存在：

获取localStorage的数据

语法

localStorage.getItem(key)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
    // 获取本地存储
    console.log(localStorage.getItem('uname'))
  </script>
</body>

</html>

删除localStorage的数据

语法

localStorage.removeItem(key)

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
    // 获取本地存储
    // console.log(localStorage.getItem('uname'))
    localStorage.removeItem('uname')
  </script>
</body>

</html>

数据已经删除

修改localStorage的数据

修改localStorage的数据和localStorage新增数据的语法一样。执行localStorage.setItem(key, value)的时候，如果这个key已经存在，就是修改；如果这个key不存在，就是新增。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 要存储一个名字
    localStorage.setItem('uname', 'tom')
    // 获取本地存储
    // console.log(localStorage.getItem('uname'))
    // localStorage.removeItem('uname')
    // 修改数据
    localStorage.setItem('uname', 'andy')
  </script>
</body>

</html>

本地存储只能存储字符串

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 保存年龄
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age'))
    // 本地存储的是字符串类型
    console.log(typeof localStorage.getItem('age'))
  </script>
</body>

</html>

这个18是字符串类型：

总结

到此这篇关于Javascript本地存储localStorage的文章就介绍到这了,更多相关Javascript本地存储localStorage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现弹性漂浮效果的广告代码
这篇文章主要介绍了JS实现弹性漂浮效果的广告代码,涉及javascript动态操作图片弹性运动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
Google (Local) Search API的简单使用介绍
这篇文章主要介绍了Google (Local) Search API的简单使用。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
使两个iframe的高度与内容自适应,且相等
使两个iframe的高度与内容自适应,且相等...
2006-11-11
详解webpack的clean-webpack-plugin插件报错
这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
js如何引入wasm文件
这篇文章主要介绍了js如何引入wasm文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
微信小程序实现点击文字页面跳转功能【附源码下载】
这篇文章主要介绍了微信小程序实现点击文字页面跳转功能,涉及navigator导航组件的简单使用技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2017-12-12
前端判断页面是在PC端还是移动端打开四种方法
本文介绍几种在前端开发中用于判断用户设备类型（PC端或移动端）的方法,包括使用navigator.userAgent、媒体查询、第三方库detect.js和Vue框架插件vue-device-detect,这些方法有助于在开发中处理设备适配和页面权限问题,需要的朋友可以参考下
2024-10-10
Javascript实现秒表倒计时功能
这篇文章主要为大家详细介绍了Javascript实现秒表倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
JS左右无缝轮播功能完整实例
这篇文章主要介绍了JS左右无缝轮播功能,结合完整实例形式分析了javascript事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
2019-05-05
浅析JavaScript中的事件委托机制跟深浅拷贝
这篇文章主要介绍了JavaScript中的事件委托机制跟深浅拷贝,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01