localStorage

Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。

sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

一、常用属性

属性 描述
length 返回存储对象中包含多少条数据。

二、常用方法

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

三、localStorage 方法封装

基于以下两个原因,我们需要进行二次封装:

android 原生系统老系统不支持 localStorage 对象,需要兼容处理。

setItem() 方法不支持存储对象,需要处理。

u.storage = {};

/**
* @description 获取localStorage对象,兼容android(android原生系统老系统不支持localstorage)
* @return localStorage对象
*/
function uzStorage() {
var ls = window.localStorage;
var isAndroid = (/android/gi).test(window.navigator.appVersion);
if (isAndroid) ls = os.localStorage();
return ls;
}

设置本地储存
/**
* @description 设置本地储存
* @param {String} key 储存的名字
* @param {*} value 储存的值
*/
u.storage.set = function (key, value) {
var v = value;
if (typeof v === 'object') {
v = JSON.stringify(v);
v = 'obj-' + v;
}
var ls = uzStorage();
if (ls) ls.setItem(key, v);
};

获取本地储存
/**
* @description 获取本地储存的数据
* @param {String} key 要获取的数据对应的名字
* @return {*}
*/
u.storage.get = function (key) {
var ls = uzStorage();
if (ls) {
var v = ls.getItem(key);
if (!v) return;
if (v.indexOf('obj-') === 0) return JSON.parse(v.slice(4));
else return v;
}
};

删除本地储存中的某些数据
/**
* @description 删除本地储存中某些数据
* @param {String} key 要删除的数据对应的名字
*/
u.storage.remove = function (key) {
var ls = uzStorage();
if (ls && key) ls.removeItem(key);
};

清空本地储存所有数据
/**
* @description 清空本地储存的所有数据
*/
u.storage.clear = function () {
var ls = uzStorage();
if (ls) ls.clear();
};

下载
npm i sg-utils -S
1

GitHub地址(记得给星哦)
https://github.com/shiguang0116/sg-utils

系列文章
JavaScript工具类

JavaScript工具类(一):util.js创建及上传
JavaScript工具类(二):cookie缓存
JavaScript工具类(三):localStorage本地储存
JavaScript工具类(四):数据类型
JavaScript工具类(五):string字符串
JavaScript工具类(六):number数字
JavaScript工具类(七):array数组
JavaScript工具类(八):object对象
JavaScript工具类(九):date日期
JavaScript工具类(十):base64编码、解码
JavaScript工具类(十一):浏览器、移动端类型
JavaScript工具类(十二):validate表单验证
JavaScript工具类(十三):url路径处理
JavaScript工具类(十四):json数据格式
JavaScript工具类:util.js用法实例

JavaScript工具类(三):localStorage本地储存的更多相关文章

  1. 【HTML5 localStorage本地储存】简介&基本语法

    了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...

  2. java工具类(三)之生成若干位随机数

    java 生成若干位随机数的问题 在一次编程的过程中偶然碰到一个小问题,就是需要生成一个4位数的随机数,如果是一个不到4位大的数字,前面可以加0来显示.因为要求最后是一个4位的整数,不带小数点.当时就 ...

  3. JDK1.8 LocalDate 使用方式;LocalDate 封装Util,LocalDate工具类(三)

    未完待续 ........ 前言: 大企鹅的日常分享,第三步,最近一直在想策略设计模式和工厂模式结合优化ifelse的写法,看了很多资料,终于写出了自己要写的东西,在这段时间里,也有求助小伙伴,但是, ...

  4. java调用svnkit工具类上传本地文件到svn服务器

    package org.jenkinsci.plugins.svn.upload.step; import java.io.*; import org.tmatesoft.svn.core.SVNCo ...

  5. JAVA调用操作javascript (JS)工具类

    import java.io.BufferedReader;import java.io.FileNotFoundException;import java.io.FileReader;import ...

  6. 工具篇:介绍几个好用的guava工具类

    前言 平时我们都会封装一些处理缓存或其他的小工具.但每个人都封装一次,重复造轮子,有点费时间.有没有一些好的工具库推荐-guava.guava是谷歌基于java封装好的开源库,它的性能.实用性,比我们 ...

  7. 【转】java缩放图片、java裁剪图片代码工具类

    一首先看下效果 二工具类 三测试类 在系统的上传图片功能中,我们无法控制用户上传图片的大小,用户可能会上传大到几十M小到1k的的图片,一方面图片太大占据了太多的空间,另一方面,我们没办法在页面上显示统 ...

  8. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  9. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. Python学习日记(二十八) hashlib模块、configparse模块、logging模块

    hashlib模块 主要提供字符加密算法功能,如md5.sha1.sha224.sha512.sha384等,这里的加密算法称为摘要算法.什么是摘要算法?它又称为哈希算法.散列算法,它通过一个函数把任 ...

  2. django 的form登录 注册

    #!/usr/bin/env python # -*- coding: utf8 -*- #__Author: "Skiler Hao" #date: 2017/3/30 15:4 ...

  3. MySQL Charset--UTF8和UTF8MB4对比测试

    UTF8和UTF8MB4 在早期MySQL版本中,使用只支持最长三字节的UTF8字符集便可以存放所有Unicode字符.随着Unicode的完善,Unicode字符集收录的字符数量越来越多,最新版本的 ...

  4. cadvisor应用

    cadvisor主页:https://github.com/google/cadvisor 容器主页:https://hub.docker.com/r/google/cadvisor cAdvisor ...

  5. Linux CentOS 7 安装PostgreSQL 9.5.17 (源码编译)

    近日需要将PostgreSQL数据库从Windows中迁移到Linux中,Linux CentOS 7 安装PostgreSQL 9.5.17 安装过程 特此记录. 安装环境: 数据库:Postgre ...

  6. vscode编写html,常用快捷方式与插件

      一.tab键补全 1.1打开vscode新建html文件,在第一行输入!,然后按下tab键,会直接出现编写html语言的基本框架标签 效果如下: <!DOCTYPE html> < ...

  7. beta版本——第七次冲刺

    第七次冲刺 (1)SCRUM部分☁️ 成员描述: 姓名 李星晨 完成了哪个任务 编写个人信息修改界面的js 花了多少时间 3h 还剩余多少时间 0h 遇到什么困难 密码验证部分出现问题 这两天解决的进 ...

  8. python dijkstra 最短路算法示意代码

    def dijkstra(graph, from_node, to_node): q, seen = [(0, from_node, [])], set() while q: cost, node, ...

  9. Spring Cloud Ribbon负载均衡(快速搭建)

    Spring Cloud Ribbon 是一个基于HTTP和TCP的客户端负载均衡工具,它基于Netflix Ribbon实现.通过 Spring Cloud 的封装, 可以让我们轻松地将面向服务的 ...

  10. 多项式的各类计算(多项式的逆/开根/对数/exp/带余除法/多点求值)

    预备知识:FFT/NTT 多项式的逆 给定一个多项式 F(x)F(x)F(x),请求出一个多项式 G(x)G(x)G(x),满足 F(x)∗G(x)≡1(mod xn)F(x)*G(x) \equiv ...