cookie,sessionStorage,localeStorage的区别

cookie是存储在浏览器端,并且随浏览器的请求一起发送到服务器端的,它有一定的过期时间,到了过期时间自动会消失。sessionStorage和localeStorage也是存储在客户端的,同属于web Storage,比cookie的存储大小要大有8m,cookie只有4kb,localeStorage是持久化的存储在客户端,如果用户不手动清除的话,不会自动消失,会一直存在,sessionStorage也是存储在客户端,但是它的存活时间是在一个回话期间,只要浏览器的回话关闭了就会自动消失。

------------

一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

示例:

if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
localStorage.removeItem("a"); //移除removeItem
localStorage.setItem("data",JSON.stringify(data) );//设置
localStorage.getItem("data");//获得

读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

localstorage与sessionstorage的使用的更多相关文章

  1. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  2. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  3. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

  4. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  5. localStorage与sessionStorage 的区别

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

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

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

  7. localStorage和sessionStorage

    首先自然是检测浏览器是否支持本地存储. 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存 ...

  8. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  9. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  10. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

随机推荐

  1. 087 Scramble String 扰乱字符串

    给定一个字符串 s1,我们可以把它递归地分割成两个非空子字符串,从而将其表示为二叉树.下图是字符串s1 = "great"的一种可能的表示形式.    great   /    \ ...

  2. On the way to the park Gym - 101147I 几何

    http://codeforces.com/gym/101147/problem/I I. On the way to the park time limit per test 5 seconds m ...

  3. dubbo源码阅读之集群(故障处理策略)

    dubbo集群概述 dubbo集群功能的切入点在ReferenceConfig.createProxy方法以及Protocol.refer方法中. 在ReferenceConfig.createPro ...

  4. arcgis jsapi接口入门系列(1):地图

    地图相关 //地图相关demo mapFun: function () { //获取地图中心点 let center = this.mapView.center; //地图中心点坐标(同地图坐标系) ...

  5. NF!=1

    NF表示列数,不等于1表示列数不为1列

  6. 将centos6的php5.3升级为5.6

    在阿里云主机上,操作系统是Centos6,php版本是5.3.因为安装Yii2.0的需要,我要升级php为5.4.因为还有5.5和5.6,当然要升到高版本了.我决定升到5.6.   首先,按照这里的步 ...

  7. HDU 4003 Find Metal Mineral (树形DP,经典)

    题意:给定一棵树图,n个节点,有边权,要派k<11个机器人从节点s出发,遍历所有的点,每当1只机器人经过1条边时就会花费该边的边权,边是可重复走的.问遍历完所有点的最小花费? 思路: 非常经典, ...

  8. (四)maven之查找jar包坐标,选择jar包版本

    ①    先访问http://www.mvnrepository.com/  ,这个地址是maven的公共库. ②   以spring core的jar包为例.在页面的最上方的中间,输入spring ...

  9. 使用canvas能画各种各样的东西

    用过canvas的人都知道,在这个画布上面可以制作各种各样的动画效果,想必大家都用过这个. 晒晒刚刚用这个做的一个demo: 现在来画一个圆看看: demo.js: var can,ctx,count ...

  10. 爬虫学习之pdf读取和存储

    在py3中如需进行pdf文件操作需要加载PDFMiner3K库文件,可通过pip方式或者可以下载源文件方式安装 python3 -m pip install pdfminer3k 下载源文件方式: 1 ...