LocalStorage存储和cookie存储

localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题。

2、使用:
     ⑴、存

if(!window.localStorage){

alert("浏览器不支持localstorage");

return false;

}else{

var storage = window.localStorage;

// 方法1

storage["a"] = 1;

// 方法2

storage.b = 1;

// 方法3  推荐

storage.setItem("c", 3);

console.log(typeof storage["c"]); // string  int类型打印出来是string,localstorage只支持string类型的存储

}

⑵、取  

if(!window.localStorage){

    alert("浏览器不支持localstorage")

}else{

    var storage=window.localStorage;

    // 方法1

    var a=storage.a;

    // 方法2

    var b=storage["b"]

    // 方法3 推荐

    var c = storage.getItem("c");

}


⑶、修改

if(!window.localStorage){

alert("浏览器支持localstorage");

}else{

var storage=window.localStorage;

storage.b=1;

storage.b=4; // 直接修改

console.log(storage.b);

        }

⑷、删除

// 移除所有

localStorage.clear();

 

// 删除某个键值对

localStorage.removeItem("a");

⑸、key()方法

for(i=0;i<storage.length;i++){

    var key =storage.key(i);

    console.log(key) // 获取对应的键

    

}
⑹、存入为JSON形式时,先转为json字符串

function setStorage () {

var str_username = $("#loginname").val();  

var str_password = $("#password").val();

var storage=window.localStorage;

var data = {

username: str_username,

password: str_password

}

var d = JSON.stringify(data)

storage.setItem("data",d);

}

⑺、读取后用转为JSON对象

 //将JSON字符串转换成为JSON对象输出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj); // Object

3、局限:
     ①、IE8以上才支持
     ②、浏览器会把localstorage的值类型限定为string类型,JSON对象需要转换。
     ③、本质上是存取字符串,存储内容太多消耗空间,页面变卡。
     ④、localStorage在浏览器的隐私模式下不可读取
     ⑤、不能被爬虫抓取

Cookie
让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术。
使用jquery.cookie.js
1、引入jquery.cookie.js
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.cookie.js"></script>

2、设置 "会话"cookie

$.cookie(‘username‘, ‘xy‘);

cookie有效期默认到用户关闭浏览器

3、设置有效时间
$.cookie(‘username‘, ‘xy‘, { expires: 7 });

4、设置有效路径 
$.cookie(‘the_cookie‘, ‘the_value‘, { expires: 7, path: ‘/‘ });// 如果在整个网站中访问这个cookie需要这样设置有效路径:path: ‘/‘

5、读取cookie
 $.cookie(‘username‘)

:cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。

6、删除cookie 

 $.cookie(‘username‘, null);   //通过传递null作为cookie的值即可

7、可选参数

$.cookie(‘the_cookie‘,‘the_value‘,{

    expires:7,  //(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;

    path:‘/‘,   // (String)创建该Cookie的页面路径;

    domain:‘jquery.com‘, // (String)创建该Cookie的页面域名;

    secure:true // (Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;

  }) 

时间: 2024-10-09 03:25:24

LocalStorage存储和cookie存储的相关文章

前端存储之cookie、localStorage

最近简单了解了前端存储中的cookie.localStorage两种存储方式 localStorage window.localStorage.setItem('a', 1) (window. 可省略) localStorage.setItem('a', 1) //存储数据 localStorage.getItem('a') //获取数据 localStorage.removeItem('a') //删除指定数据 localStorage.clear( ) //删除全部数据 cookie doc

浅谈浏览器存储(cookie、localStorage、sessionStorage)

今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Cookie基于HTTP规范,用来识别用户. Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态. 会话状态管理(如用户登录状态.购物车.游戏分数或其它需要记

JavaScript一个cookie存储的类

所有输出都在浏览器的控制台中 <script type="text/javascript"> /** * cookieStorage.js * 本类实现像localStorage和sessionStorage一样存储API,不同的是,基于http cookie实现它 */ function cookieStorage( maxage , path ){ //两个参数分别代表存储有效期和作用域 //获取一个存储全部cookie信息的对象 this.cookie = (func

cookie存储

由于HTTP协议是地域无关的,所以用户经常使用cookies作为持久存储.URL加载系统提供接口来创建和管理cookies,发送cookies作为http请求的一部分,当收到服务端响应时获取cookies. OS X和iOS提供NSHTTPCookieStorage类,这个类提供管理NSHTTPCookie对象集合的接口.OS X中,所以应用共享cookies:ios中每个应用管理自己的cookies. 相关章节:cookie存储 版权声明:本文为博主原创文章,未经博主允许不得转载.

cookie : 存储数据

cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据 1.不同的浏览器存放的cookie位置不一样,也是不能通用的 2.cookie的存储是以域名形式进行区分的 3.cookie的数据可以设置名字的 4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样 5.每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样 我们通过document.cookie来获取当前网站下的cookie的时候,得到的

Cookie存储数据

首先在加载事件里验证Cookie里面是否有数据: //若cookie不为空,则将数据填充到text中        if (Request.Cookies["username"] != null) {            this.txtUserName.Text = Request.Cookies["username"].Value;            this.txtPwd.Text = Request.Cookies["pwd"].V

cookie存储对象信息

最近看到某公司某项目中用于保存多个城市信息到cookie中的方法,该方法的逻辑是按时间顺序记录最近访问过的三个城市的名字及id,逻辑包插入与含排重.插入与排重的代码如下:                  获取cityid与cityname                     if (cityid == Utility.TypeParse.ToInt(CookieHelper.get("fwid1")))                 {                    

cookie存储对象或数组

问题: 保存的cookie用firefox怎么刷新都刷不出来,而把cookie的值改为字符串或数字时正常,果断把数据源用json编码,然后存储,果然出来了. 解决方法: 在保存cookie值为对象或数组时,最好用json编码. cookie存储对象或数组

js读写Cookie问题(Cookie存储时长、Cookie存储域)汇总

在采集网站用户行为数据/使用js对用户行为做交互时,经常会使用到Cookie,了解Js Cookie的读写,以及一些细节,非常重要.   什么是Cookie 所谓Cookie,只是一条极为短小的信息,它被浏览器自动地放置在访问用户的电脑硬盘中. 例如:C:\Users\[user]\AppData\Roaming\Microsoft\Windows\Cookies 如上图所示,打开的一个文件里面,标示了一个域下多个Cookie的信息. 检测/判断浏览器是否支持Cookie 在绝大多数浏览器中,可