JavaScript工具类(三):localStorage本地储存
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本地储存的更多相关文章
- 【HTML5 localStorage本地储存】简介&基本语法
了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...
- java工具类(三)之生成若干位随机数
java 生成若干位随机数的问题 在一次编程的过程中偶然碰到一个小问题,就是需要生成一个4位数的随机数,如果是一个不到4位大的数字,前面可以加0来显示.因为要求最后是一个4位的整数,不带小数点.当时就 ...
- JDK1.8 LocalDate 使用方式;LocalDate 封装Util,LocalDate工具类(三)
未完待续 ........ 前言: 大企鹅的日常分享,第三步,最近一直在想策略设计模式和工厂模式结合优化ifelse的写法,看了很多资料,终于写出了自己要写的东西,在这段时间里,也有求助小伙伴,但是, ...
- java调用svnkit工具类上传本地文件到svn服务器
package org.jenkinsci.plugins.svn.upload.step; import java.io.*; import org.tmatesoft.svn.core.SVNCo ...
- JAVA调用操作javascript (JS)工具类
import java.io.BufferedReader;import java.io.FileNotFoundException;import java.io.FileReader;import ...
- 工具篇:介绍几个好用的guava工具类
前言 平时我们都会封装一些处理缓存或其他的小工具.但每个人都封装一次,重复造轮子,有点费时间.有没有一些好的工具库推荐-guava.guava是谷歌基于java封装好的开源库,它的性能.实用性,比我们 ...
- 【转】java缩放图片、java裁剪图片代码工具类
一首先看下效果 二工具类 三测试类 在系统的上传图片功能中,我们无法控制用户上传图片的大小,用户可能会上传大到几十M小到1k的的图片,一方面图片太大占据了太多的空间,另一方面,我们没办法在页面上显示统 ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
随机推荐
- Python学习日记(二十八) hashlib模块、configparse模块、logging模块
hashlib模块 主要提供字符加密算法功能,如md5.sha1.sha224.sha512.sha384等,这里的加密算法称为摘要算法.什么是摘要算法?它又称为哈希算法.散列算法,它通过一个函数把任 ...
- django 的form登录 注册
#!/usr/bin/env python # -*- coding: utf8 -*- #__Author: "Skiler Hao" #date: 2017/3/30 15:4 ...
- MySQL Charset--UTF8和UTF8MB4对比测试
UTF8和UTF8MB4 在早期MySQL版本中,使用只支持最长三字节的UTF8字符集便可以存放所有Unicode字符.随着Unicode的完善,Unicode字符集收录的字符数量越来越多,最新版本的 ...
- cadvisor应用
cadvisor主页:https://github.com/google/cadvisor 容器主页:https://hub.docker.com/r/google/cadvisor cAdvisor ...
- Linux CentOS 7 安装PostgreSQL 9.5.17 (源码编译)
近日需要将PostgreSQL数据库从Windows中迁移到Linux中,Linux CentOS 7 安装PostgreSQL 9.5.17 安装过程 特此记录. 安装环境: 数据库:Postgre ...
- vscode编写html,常用快捷方式与插件
一.tab键补全 1.1打开vscode新建html文件,在第一行输入!,然后按下tab键,会直接出现编写html语言的基本框架标签 效果如下: <!DOCTYPE html> < ...
- beta版本——第七次冲刺
第七次冲刺 (1)SCRUM部分☁️ 成员描述: 姓名 李星晨 完成了哪个任务 编写个人信息修改界面的js 花了多少时间 3h 还剩余多少时间 0h 遇到什么困难 密码验证部分出现问题 这两天解决的进 ...
- python dijkstra 最短路算法示意代码
def dijkstra(graph, from_node, to_node): q, seen = [(0, from_node, [])], set() while q: cost, node, ...
- Spring Cloud Ribbon负载均衡(快速搭建)
Spring Cloud Ribbon 是一个基于HTTP和TCP的客户端负载均衡工具,它基于Netflix Ribbon实现.通过 Spring Cloud 的封装, 可以让我们轻松地将面向服务的 ...
- 多项式的各类计算(多项式的逆/开根/对数/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 ...