<<< html5本地储存

时间:2023-02-04 09:13:07

类似与Cookies,但由于Cookies储存量太小,大小也只有4-5KB的样子,html5的本地储存能存5M大小的数据

html5本地储存属性有,localStorage和sessionStorage,localStorage代表储存在本地,sessionStorage后面是随着session,窗口关闭即消失

localStorage

设置html5本地储存

localStorage.value = 1;//设置value 为"1"
localStorage["user"] = "admin";//设置user的值为"admin"
localStorage.setItem("password","123456");//设置password为"123456"

取出值属性
var a = localStorage["value"];//获取value的值
var b = localStorage.user;//获取user的值
var c = localStorage.getItem("password");//获取password的值

删除值
localStorage.removeItem("user");//清除user的值

localStorage.clear();//清除所有值

注:重复设置两个相同的值,第二次会覆盖第一次的

javascript使用json格式,如果要存储在本地,可调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式

var userMsg= {user:"admin","password":"123456","token":1};
storage.setItem("userMsg",JSON.stringify(userMsg));
userMsg= JSON.parse(storage.getItem("userMsg"));

 sessionStorage

用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁。
 不是一种持久化的本地存储。

方法属性:

sessionStorage.getItem(key)          // 获取指定key的本地存储的值
 sessionStorage.setItem(key,value)  //将value存储到key字段中
 sessionStorage.removeItem(key)    //删除指定ke的本地存储的值
 sessionStorage.length                   //sessionStorage的项目数

sessionStorage.clear();  //清空当前会话存储的数据

html5本地储存支持浏览器

<<< html5本地储存

<<< html5本地储存的更多相关文章

  1. HTML5本地储存sessionStorage的销毁数据问题

    前几天项目中用到了本地储存,虽然说也就是几个api,但之前有一个问题一直没有去想,我们知道本地储存分为两种,一种是临时储存,关闭浏览器后数据就会销毁,另外一种是没有时间限制的储存,我们做的这个页面比较 ...

  2. 【HTML5 localStorage本地储存】简介&amp&semi;基本语法

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

  3. HTML5中本地储存概念是什么,什么优点 ,与cookie有什么区别?

    html5中的Web Storage 包括了两种存储方式: sessionStorage  和  localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...

  4. 前端学习之本地储存与cookie

    今天主要的学习内容是cookie与本地储存的知识, 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别, ...

  5. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  6. 转 html5离线储存&comma;application cache&comma;manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  7. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  8. 1分钟快速制作漂亮的Html5本地记事本

    大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...

  9. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

随机推荐

  1. 在VisualStudio2013,2015中如何安装自定义项目模板

    For example, I want to install EP prj template: AxWebProject.zip Copy AxWebProject.zip zip file into ...

  2. 前端学习资源(CSS&plus;HTML5)

    CSS CSS | MDN CSS参考手册 CSS探索之旅 Web前端实验室 STYLESHEETS CSS3中的content字符编码 Font Awesome, 一套绝佳的图标字体库和CSS框架 ...

  3. Python学习 之 走进python

    1.Python:是一种解释型的.面向对象的.带有动态语义的高级程序设计语言. 2.Python发展阶段 —CNRI时期 —BeOpen时期 —DC时期 —Python 3.0 Python里程碑:2 ...

  4. &lbrack;置顶&rsqb; EasyMock构建单元测试

    1. 背景 单元测试作为程序的基本保障.很多时候构建测试场景是一件令人头疼的事.因为之前的单元测试都是内部代码引用的,环境自给自足.开发到了一定程度,你不得不到开始调用外部的接口来完成你的功能.而外部 ...

  5. python获取多线程的返回值

    import threading class MyThread(threading.Thread): def __init__(self,func,args=()): super(MyThread,s ...

  6. kubernete 数据库 etcd

    etcdctl --cert-file /etc/ssl/etcd/ssl/member-pserver78.pem --key-file /etc/ssl/etcd/ssl/member-pserv ...

  7. python 廖雪峰的官方网站

    https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014316119884678 ...

  8. 【转载】 看*

    原文地址: https://www.jianshu.com/p/15d8726fa8a8 作者:Demisstif 来源:简书 ------------------------------------ ...

  9. tomcat8&period;0&period;15&plus;spring4&period;1&period;2的集群下共享WebSocketSession&quest;

    环境:nginx+Tomcat服务器 A B C   问题:如果用户 1 访问由服务器 A socket服务  ,用户2 由服务器 C socket服务  ,此时如果用户 1, 2 想通过  sock ...

  10. jQuery选择器详解及实例---《转载》

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...