通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,自己试用了一下,在此留个备忘。

在项目中,如果用到很多次storage,要存储很多数据,就要把它封装成函数了:

(该函数系不知名大神所写,如有侵犯原创,请联系我……)

function setStorage(key,value){
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入字段
storage.setItem(key,value);
}
}
function getStorage(key){
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
var key=storage.getItem(key);
// console.log(key);
return key;
}
}

setStorage是存储数据的,key是指定的数据名称,可以随意起,但是一定要是字符串类型,否则浏览器自动把值作为key的名字。

如图 第一个值,就是key不是以字符串指定的,即没有加双引号。

value值字符串类型的也切记加双引号。

在浏览器中如何查看storage?

 

较新版本的chrome浏览器,查看位置如图:

在项目中如果多次调用同样的存储数据的函数,则数据会实时改变,如果需要清除所有存储的数据:

localstorage.clear();或者sessionStorage.clear();

项目中使用的原则就是,哪个数据需要存储,就用哪个数据调用存数数据的函数。

其他概念,相信其他参考资料已经写的很详细透彻了。

http://www.111cn.net/wy/html5/85886.htm

上面这篇写的不错,收藏一下。

localstorage和sessionstorage上手使用记录的更多相关文章

  1. localStorage与sessionStorage 的区别

    通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...

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

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

  3. localStorage、sessionStorage详解,以及storage事件使用

    有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...

  4. 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  5. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

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

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

  7. LocalStorage和sessionStorage之间的区别

    众所周知,自从HTML 5 标准出现之后,本地化存储一度成为热搜的关键词.在HTML 5 最开始时,本地存储有两种方式:一种是web Storage,另一种是web SQL.由于web SQL的实现是 ...

  8. hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

    近期在项目中进行hybrid app开发,项目中有大量的js代码执行在android设备上. 使用到了非常多HTML5的新特性,之前没有遇到过,不了解.这里记录下添加点前端的知识.混合式app开发中. ...

  9. 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测

    如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...

随机推荐

  1. java框架篇---Struts2的处理流程

    一.Struts2的处理流程: 客户端产生一个HttpServletRequest的请求,该请求被提交到一系列的标准过滤器(Filter)组建链中(如ActionContextCleanUp:它主要是 ...

  2. 有用sql语句一

    DECLARE @retval int, @param1 int EXECUTE @retval=master.dbo.xp_fileexist 'D:\TkSoft\SamplePic\Fabric ...

  3. 未能加载文件或程序集”xxxx”或它的某一个依赖项,试图加载格式不正确的程序。

    通常是因为应用程序编译的目标平台与引用的DLL类库目标平台不一致造成的,如应用程序目标编译为64位,而引用了32位的DLL. 在Visual Studio修改应用程序目标编译平台即可. 更多关于目标编 ...

  4. JTree常用方法

    private JTree jtNetDevice;//数组件申明private JScrollPane jspTree;//滚动面板申明 1.初始化     DefaultMutableTreeNo ...

  5. hbase 学习(十四)Facebook针对hbase的优化方案分析

    使用hbase的目的是为了海量数据的随机读写,但是在实际使用中却发现针对随机读的优化和gc是一个很大的问题,而且hbase的数据是存储在Hdfs,而Hdfs是面向流失数据访问进行设计的,就难免带来效率 ...

  6. 彻底去除Win10“快速访问”

    windows10的“快速访问”功能对于我个人用处不大,作为一个爱折腾的人决定尝试彻底除去“快速访问”这个侧边栏. 注意:此操作需要确保你已经设置了[让点击Win10任务栏“文件资源管理器”图标打开“ ...

  7. 关于Unity中的模型描边与Shader切换(专题二)

    模型描边 1: LOL里面的模型描边效果,点击防御塔会有描边的效果,被攻击的时候模型也要描边凸显一下2: 网上可以找到模型描边的Shader,可以直接下载使用,一组第三方的Shader, 帮我们解决了 ...

  8. Ubuntu18.04 + cuda9.0+cudnn7.0

    1 cannot find Toolkit in /usr/local/cuda-8.0 2017年05月27日 17:37:33 阅读数:2754  对于新版本ubuntukylin17.04安装C ...

  9. python新模块:secrets模块(为账户密码)

    默认我们会使用random模块, 而secrets模块用来产生强加密的随机数, 例如账号认证 import secrets import string characters = string.asci ...

  10. if 结构和三目运算和switch语句

    if语句需要注意的地方: if判断只能接一个语句,存在多个语句时,用块语句表示{},若在if判断后 直接加“:”相当于if判断后加一个空语句,即使条件成立什么也不会干! 1. if的第一种形态(真假) ...