关于localStorage的存储,读取,删除

目录
  • localStorage的存储,读取,删除
    • localStorage存储
    • localStorage读取
    • localStorage删除
  • localStorage使用详解
    • 1. localStorage 简介
    • 2. 调试 localStorage
    • 3. localStorage 的 CRUD

localStorage的存储,读取,删除

localStorage存储

我们通过以下方式将数据储存到localStorage中

window.localStorage.setItem('key',value)

但有时value为一个对象Object，以上面的方式写入，会出现读取的返回值为{object Object}的情况，但这并不是我们想要的，此时我们需要使用新的方式

传入Object

window.localStorage.setItem('param',JSON.stringify(Object))

通过JSON.stringify(Object)方法将对象转化为一个json格式的字符串进行存储

localStorage读取

我们通过以下方式来读取localStorage中的值

window.localStorage.getItem('key')

相对的在读取json格式字符串只有我们也无法直接使用，需要将它转换为josn对象之后才是我们想要的结果，所以我们需要调用 JSON.parse()方法来进行转化，之后在继续使用

JSON.parse(window.localStorage.getItem('key'))

localStorage删除

我们通过以下方法来删除对应key以及key中的内容

window.localStorage.removeItem('key')

localStorage清空所有的key

清空localStorage中所有的key;

注意：请谨慎使用,它会清空所有的本地存储数据

window.localStorage.clear()

localStorage使用详解

1. localStorage 简介

localStorage 和 sessionStorage 一样，都是 HTML5 中最新引入的 Web 存储 API。

Web 存储 API，英文为 Web Storage API，通过它可以方便地在用户浏览器中存储键值对。

Web 存储 API 包括两个对象：

  • localStorage
  • sessionStorage

在 HTML5 之前，应用数据需要存放在 Cookie 中，每次请求时都需要携带它。相较而言，Web 存储 API 拥有以下优点：

  • 不向服务器传输信息，更加安全。
  • 比起 [[202009011658 Cookie 数量和大小的限制|Cookie 4kb 的容量限制]]，可以在本地存储大量数据，通常为 5mb。

除此之外，localStorage 还有以下特点：

  • 永久存储数据，没有过期时间，除非使用 JavaScript、清除浏览器缓存或者本地数据才能够删除。
  • 存储容量上限比 Cookie 和 SessionStorage 都要大。
  • 遵循同源策略，来自同一个源的所有页面共享同样的数据。同源指的是域名和协议相同。
  • 其中存储的键值对都是字符串，如果不是字符串将自动转换为字符串。

2. 调试 localStorage

  • Ctrl - Shift - I 或者 F12
  • 点击 Application
  • 左侧点击 Storage 下面的 LocalStorage

3. localStorage 的 CRUD

为 localStorage 添加或修改数据有三种方式：

localStorage.age = 100
localStorage['age'] = 100
localStorage.setItem('age', 100)  // 推荐使用

在 localStorage 中查看数据也有三种方式：

localStorage.age
localStorage['age']
localStorage.getItem('age')  // 推荐使用

在 localStorage 中删除数据有三种方式：

delete localStorage.age
delete localStorage['age']
localStorage.removeItem('age')  // 推荐使用

清空整个 localStorage：

// 清空整个 localStorage
localStorage.clear()

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • localStorage过期时间设置的几种方法

    目录 问题描述 1.初级解法 2.中级解法 3.高级解法 4.骨灰级解法 聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行**「读,写, 删」操作, 但是相比于 cookie, localStorage 唯一美中不足的就是「不能设置每一个键的过期时间」**. localStorage 属性允许我们访问一个 Document 源(origi

  • 一文教你如何实现localStorage的过期机制

    一文教你如何实现localStorage的过期机制

    目录 前言 cookie过期机制 expires和max-age的区别 localStorage数据过期 需求分析: 动手实践 参考文章 总结 前言 我们都知道cookie存储的数据是可以添加过期时间属性(Expires/Max-Age),实现过期的. 那么,LocalStrorage.sessionStrorage可以设置过期吗?? 带着这样的疑问,我们一层层剥开其神秘的面纱. cookie过期机制 我们知道Expires和Max-age都可以设置cookie的过期时间,那么两者存在什么样的异

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

  • localStorage设置有效期和过期时间的简单方法

    目录 前言 实现思路 实现代码 总结 前言 总所周知localStorage默认是不会过期的,也没有可设置过期的api,如果要实现过期清除就需要自己实现一个api 实现思路 在Storage原型上新增两个方法setCanExpireLocal,getCanExpireLocal,分别用于设置和获取值 实现过期功能至少需要三个时间,存值时间,取值时间,有效时间 存取时间戳都是在函数被调用时在函数内通过Date.now()生成 有效时间在存值的时候传入 如果存值时间戳加上有效时间小于当前时间戳说明还

  • js如何操作localstorage

    目录 js操作localstorage 1.首先封装一个全局方法 2.调用方法 js localstorage(本地存储)必知 HTML API 基本用法 生存期 数据结构 容量限制 域名限制 异常处理 JavaScript 存储对象 js操作localstorage localstorage是web前端常用的本地存储服务,它相对于cookie 有几个优势: ①数据存储量大 ②不会携带给后台,避免传输没用的数据 ③操作简便 1.首先封装一个全局方法 以便各个地方调用 export functio

  • 关于localStorage的存储,读取,删除

    关于localStorage的存储,读取,删除

    目录 localStorage的存储,读取,删除 localStorage存储 localStorage读取 localStorage删除 localStorage使用详解 1. localStorage 简介 2. 调试 localStorage 3. localStorage 的 CRUD localStorage的存储,读取,删除 localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',val

  • 在localStorage中存储对象数组并读取的方法

    频繁ajax请求导致页面响应变慢.于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求. 鉴于localstorage中只能存储字符串,所以我们要借助于JSON.stringify()和JSON.parse(); $.ajax({ type: "get", async: "true", url: "", data: {}, dataType: "jsonp", success: func

  • AngularJS之ionic 框架下实现 Localstorage本地存储

    AngularJS之ionic 框架下实现 Localstorage本地存储

    前言: 我们前台用的是ionic+AngularJS,做的是混合模式移动应用.最近有一个需求是,我在页面A上面滑动的时候,跳入页面B,页面B需要加载页面A的数据,这样的页面传值如何实现呢?那就需要用到LocalStorage本地存储了. Ionic Ionic是目前最有潜力的一款HTML5手机应用开发框架.通过SASS构架应用程序,他提供了很多UI控件来帮助开发者开发强大的应用.加上angularjs可以让ionic应用体验度增强.代码也非常简单.angularjs可以提供数据的双向绑定,使用它

  • vue实现本地存储添加删除修改功能

    vue实现本地存储添加删除修改功能

    本文实例为大家分享了vue实现本地存储添加删除修改的具体代码,供大家参考,具体内容如下 实现功能: 输入的内容添加到正在进行列表中, 双击修改功能, 点击esc键,取消,还是之前的内容, 点击回车,修改成功, 修改框失焦时修改成功, 选中按钮时进入已完成列表,未选中时在正在进行中列表, 点击删除进行删除当行, 本地存储下次打开上次添加的还在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

  • JavaScript中localStorage对象存储方式实例分析

    本文实例讲述了JavaScript中localStorage对象存储方式.分享给大家供大家参考,具体如下: [Local storage limitations]文章中提及JavaScript里的local storge的限制,例子中在localStorage里存储了一个bool型的数据,但是却没有像我们期待的一样进行存储. 当我们存储布尔型,数值型,字符串型时,localStorage对象会将我们存储的数据默认转为字符串字面量. localStorage[0] = false;// "fals

  • Android学习之文件存储读取

    Android学习之文件存储读取

    前言 相信大家都知道知道,在AndroidOS中,提供了五中数据存储方式,分别是:ContentProvider存储.文件存储.SharedPreference存储.SQLite数据库存储.网络存储.那么这一篇,我们介绍文件存储. 1.Android文件的操作模式 学过Java的同学都知道,我们新建文件,然后就可以写入数据了,但是Android却不一样,因为Android是 基于Linux的,我们在读写文件的时候,还需加上文件的操作模式,Android中的操作模式如下: 2.文件的操作模式 我们

  • Python存储读取HDF5文件代码解析

    HDF5 简介 HDF(Hierarchical Data Format)指一种为存储和处理大容量科学数据设计的文件格式及相应库文件.HDF 最早由美国国家超级计算应用中心 NCSA 开发,目前在非盈利组织 HDF 小组维护下继续发展.当前流行的版本是 HDF5.HDF5 拥有一系列的优异特性,使其特别适合进行大量科学数据的存储和操作,如它支持非常多的数据类型,灵活,通用,跨平台,可扩展,高效的 I/O 性能,支持几乎无限量(高达 EB)的单文件存储等,详见其官方介绍:https://suppo

  • Asp.Net 文件操作基类(读取,删除,批量拷贝,删除,写入,获取文件夹大小,文件属性,遍历目录)

    复制代码 代码如下: using System; using System.IO; using System.Text; using System.Data; using System.Web.UI; using System.Web.UI.WebControls; namespace ec { /// <summary> /// 文件操作类 /// </summary> public class FileObj : IDisposable { private bool _alre

  • 实现PHP中session存储及删除变量

    实现PHP中session存储及删除变量

    首先大家需要了解一下,PHP中session什么意思?有什么用? session中文的意思可以表示为"会话",其本来的含义是指有始有终的一系列动作/消息,例如用户提问某个问题,然后被回答,这样一个完整的对话,就相当于一次会话. 而PHP session 变量就是用于存储有关用户会话的信息,或更改用户会话的设置.Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用. 但是session会话信息是临时的,在用户离开网站后就会被删除.如果需要永久储存信息,就需要把数据

  • vue中使用localstorage来存储页面信息

    vue中使用localstorage来存储页面信息

    今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻. 环境搭建: 参考:vue API 超简单的Vue.js环境搭建教程 详情: npm install --global vue-cli  vue init webpack vue-project 然后: cd vue-project npm install    如果你配置了淘宝镜像,也可以用cnpm install

随机推荐