js如何操作localstorage

目录
  • js操作localstorage
    • 1、首先封装一个全局方法
    • 2、调用方法
  • js localstorage(本地存储）必知
    • HTML API
    • 基本用法
    • 生存期
    • 数据结构
    • 容量限制
    • 域名限制
    • 异常处理
    • JavaScript 存储对象

js操作localstorage

localstorage是web前端常用的本地存储服务，它相对于cookie

有几个优势：

  • ①数据存储量大
  • ②不会携带给后台，避免传输没用的数据
  • ③操作简便

1、首先封装一个全局方法

以便各个地方调用

export function handleLocalStorage(method, key, value) {
  switch (method) {
    case 'get' : {
      let temp = window.localStorage.getItem(key);
      if (temp) {
        return temp
      } else {
        return false
      }
    }
    case 'set' : {
      window.localStorage.setItem(key, value);
      break
    }
    case 'remove': {
      window.localStorage.removeItem(key);
      break
    }
    default : {
      return false
    }
  }
}

2、调用方法

①存储

handleLocalStorage('set', 'userName', 'Tom');

②获取

handleLocalStorage('get', 'userName');

③删除

handleLocalStorage('remove', 'userName');

js localstorage(本地存储）必知

HTML API

localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应window.sessionStorage。

localStorage 和 sessionStorage 的区别主要是在于其生存期。

基本用法

localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。

生存期

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。

sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

数据结构

localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。

举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

容量限制

目前业界基本上统一为5M，已经比cookies的4K要大很多了

域名限制

由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。

异常处理

localstorage在目前的浏览器环境来说，还不是完全稳定的，可能会出现各种各样的bug，一定要考虑好异常处理。

我个人认为localstorage只是资源本地化的一种优化手段，不能因为使用localstorage就降低了程序的可用性，那种只是在console里输出点错误信息的异常处理我是绝对反对的。

localstorage的异常处理一般用try/catch来捕获/处理异常。

JavaScript 存储对象

存储对象方法

  • key(n) 返回存储对象中第 n 个键的名称
  • getItem(keyname) 返回指定键的值
  • setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值。
  • removeItem(keyname) 移除键
  • clear() 清除存储对象中所有的键

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

赞 (0)

相关推荐

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

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

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

  • JavaScript本地储存:localStorage、sessionStorage、cookie的使用

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 1. sessionStorage sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除: setItem(key,value) 设置数据 getItem(key) 获取数据 removeItem(key) 移除数据 clear() 清除所有值 <script> // 添加数据 window.sessionStorage.setItem("na

  • Javascript怎样使用SessionStorage和LocalStorage

    目录 前言 SessionStorage和LocalStorage简介 如何使用SessionStorage和LocalStorage LocalStorage与SessionStorage的区别 安全性说明 应对跨站点脚本攻击(XSS) 如何避免攻击? 对用户体验的提升 使用存储对象进行浏览器缓存 监听LocalStorage变化 总结与结论 前言 作为Web开发人员,在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的.在大多数情况下,可供我们使用就是LocalSto

  • 如何在JavaScript中使用localStorage详情

    如果你是一名开发人员,想要进入到.NET的世界,你需要知道都有哪些可能.由于.NET Framework是.NET生态系统中最流行的技术,你可以用它来构建各种各样的应用程序,但是最近,出现了一些新的东西,比如 .NET Core 和.NET Standard library.我们可以在项目或构建中使用它吗? localStorage对象是web编程中应用最广泛的对象之一.它提供了在用户计算机上本地存储键值对的简单解决方案. 大多数web开发人员都喜欢localStorage API,因为它具有简

  • JS 中Json字符串+Cookie+localstorage

    JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • js如何操作localstorage

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

  • JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)

    POP 删除最后一项 删除最后一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.pop();//a:[1, 2, 3, 4] a.pop();//a:[1, 2, 3] a.pop();//a:[1, 2] shift 删除第一项 删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.shift(); //a:[2,3,4,5] a.shift(); //a:[3, 4,

  • Node.js数据库操作之查询MySQL数据库（二）

    前言 我们在上一篇文章<Node.js数据库操作之连接MySQL数据库(一)>中已经学习了Nodejs连接MySQL数据库的几种方法,数据库连接上了之后就需要对数据库进行查询.本篇文章介绍一下查询MySQL数据库的方法.下面话不多说,来看看详细的介绍吧. 查询方式 上一篇文章中,我们用到了一种查询数据库的最基本的方法:connection.query(sqlString, callback) . 第一个参数是一个SQL语句,可以是任意的数据库语句,而第二个参数是一个回调函数,查询结果通过回调参

  • js链表操作(实例讲解)

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function Node(v){ this.value=v; this.next=null; } function ArrayList(){ this.head=new Node(

  • 基于js对象,操作属性、方法详解

    一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

  • js+html5操作sqlite数据库的方法

    本文实例讲述了js+html5操作sqlite数据库的方法.分享给大家供大家参考,具体如下: //copyright by lanxyou lanxyou[at]gmail.com var lanxDB=function(dbname){ var db=openDatabase(dbname,'1.0.0','',65536); return{ //返回数据库名 getDBName:function(){ return dbname; }, //初始化数据库,如果需要则创建表 init:func

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

  • JS简单操作select和dropdownlist实例

    本文实例讲述了JS简单操作select和dropdownlist的方法.分享给大家供大家参考.具体实现方法如下: 一.js选中服务器控件select与dropdownlist 1. js操作服务器控件select 复制代码 代码如下: <select id="selectID" onchange="return showMessage()">      <option value="0">==请选择==</optio

  • 详谈Node.js之操作文件系统

    1. 同步方法与异步方法 在Node.js中,使用fs模块来实现所有有关文件及目录的创建.写入及删除操作.,在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.这两者区别是:同步方法立即返回操作结果,在使用同步方法执行的操作结束之前,不能执行后续代码,代码类似如下: Var fs = require('fs') var data = fs.readFileSysnc('./index.html','utf8') //等待操作返回结果,然后利用该结果 console.log(dat

  • js字符串操作总结(必看篇)

    字符方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> /* charAt方法和charCodeAt方法都接收一个参数,基于0的

随机推荐