localstorage和sessionstorage上手使用记录
通过阅读各路大神对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上手使用记录的更多相关文章
- localStorage与sessionStorage 的区别
通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- localStorage、sessionStorage详解,以及storage事件使用
有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...
- 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
- web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- LocalStorage和sessionStorage之间的区别
众所周知,自从HTML 5 标准出现之后,本地化存储一度成为热搜的关键词.在HTML 5 最开始时,本地存储有两种方式:一种是web Storage,另一种是web SQL.由于web SQL的实现是 ...
- hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database
近期在项目中进行hybrid app开发,项目中有大量的js代码执行在android设备上. 使用到了非常多HTML5的新特性,之前没有遇到过,不了解.这里记录下添加点前端的知识.混合式app开发中. ...
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
随机推荐
- Springmvc 定时器的实现
有时候会需要项目中,定时去执行一些东西,这个时候就需要用到定时器了.比较简单, 当你springmvc环境搭建成功的时候. 本文转载自:https://www.cnblogs.com/wqj-blog ...
- for语句查看js对象
for (var obj in o.curform) { document.write("<p>" + obj + " = " + o.curfor ...
- ActiveMQ两种模式PTP和PUB/SUB<转>
1.PTP模型 PTP(Point-to-Point)模型是基于队列(Queue)的,对于PTP消息模型而言,它的消息目的是一个消息队列(Queue),消息生产者每次发送消息总是把消息送入消息队列中, ...
- opencv 中affine函数实现旋转和平移
图像旋转和平移是图像处理中常用的一种操作,opencv2和opencv3中对图像的旋转和平移都是通过仿射变换函数cv::warpAffine()来实现的. 1.图像的旋转 图像的旋转具体实现分为两步: ...
- C# 将MDI窗口嵌入普通窗口
模块化的开发,将模块合并到一起的时候,遇到了Mdi不能添加到其它窗口下的问题. 分两种情况: 将mdi窗口A设成普通窗口B的子控件,需要将A的TopLevel设置成false,但是Mdi窗口的TopL ...
- ROS关于cv_brige的使用
最近想使用OpenCV 和ROS实现点云的拼接,实现三维重建,那么在学习了kinect的基本的使用方法以后我们知道,直接使用ROS 的包即可得到点云,深度图,rgb图等信息, roslaunch op ...
- git push报错:error: RPC failed; result=22, HTTP code = 413
新项目推送到服务器时报错: error: RPC failed; result=22, HTTP code = 413| 7.66 MiB/s fatal: The remote end hun ...
- 开始一段新的敏捷学习之旅 —— IT帮读书会第4期《Scrum实战》
刚看了一下,距离上一次写博客过去快1年半了.之前的知识管理都放到笔记软件中了,但是现在看来,收藏了很多东西,输入很多,但是输出有限. 学习任何领域的知识,如果只有输入没有输出,效果都是很有限的,有时需 ...
- HOW-TO GEEK SCHOOL
This How-To Geek School class is intended for people who want to learn more about security when usin ...
- ThinkPHP使用memcache缓存服务器
(1)Thinkphp的默认缓存方式是以File方式,在/Runtime/Temp 下生成了好多缓存文件. 服务器装了memcached后想给更改成memecache方式 在Conf/config.p ...