Javascript本地存储数据方案

- 日理万妓 2022-06-08 10:45 498阅读 0赞

# Javascript本地存储数据方案 #

## Cookie ##

这个恐怕是最常见也是用得最多的技术了，也是比较古老的技术了。COOKIE优点很多，使用起来很方便  
但它的缺点也很多：  
比如跨域访问问题；无法保存太大的数据（最大仅为4KB）；本地保存的数据会发送给服务器，浪费带宽 等等；  
大家都比较熟悉，这里不再过多介绍。  
  
下面主要说一下HTML5提供的几种本地存储方案。

## localStorage ##

这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。  
它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。  
它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。  
更多的详细介绍可以参考这里

### 使用方法： ###

localStorage.length 获得storage中的个数  
localStorage.key(n) 获得storage中第n个元素对的键值（第一个元素是0）  
localStorage.getItem(key)获取键值key对应的值  
localStorage.key   获取键值key对应的值  
localStorage.setItem(key, value) 添加数据，键值为key，值为value  
localStorage.removeItem(key) 移除键值为key的数据  
localStorage.clear() 清除所有数据  
  
另外推荐一个第三方基于localStorage的存储方案 jStorage，它对localStorage进行了封装，并且实现了可以手动设置数据的过期时间  
此外它还提供了两个方法 Publish/Subscribe，通过使用这两个方法可以实现同一浏览器多窗口之间数据同步。  
详细的说明可以访问它的官方网站：jStorage

### 存储对象或简单类型的例子 ###

var dataStorage = window.localStorage;
    
    var chatUsers=[];
    chatUsers.push(item);
    var strchatUsers = JSON.stringify(chatUsers); //转化为JSON字符串
    dataStorage.setItem("chatUsers", strchatUsers);
    
    var strchatUsers = dataStorage.getItem("chatUsers");
        //转换为对象
    var obj=JSON.parse(strchatUsers);
    
    var userCode ="1001";
    var nums =100;
    dataStorage.setItem("userUnReadMsgNums" + userCode, nums + 1);
    
    var struserUnReadMsgNums = dataStorage.getItem("userUnReadMsgNums" + userCode);
    var nums2 =parseInt(struserUnReadMsgNums);

## sessionStorage  ##

和服务器端使用的SESSION类似，是一种会话级别的缓存，关闭浏览器会数据会被清除。  
不过有点特别的是它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。  
  
使用方法（和localStorage完全相同）：  
  
sessionStorage.length获得storage中的个数  
sessionStorage.key(n)获得storage中第n个元素对的键值（第一个元素是0）  
sessionStorage.getItem(key)获取键值key对应的值  
sessionStorage.key 获取键值key对应的值  
sessionStorage.setItem(key, value)添加数据，键值为key，值为value  
sessionStorage.removeItem(key)移除键值为key的数据  
sessionStorage.clear()清除所有数据

## globalStorage ##

这个是Firefox浏览器特有的，也是一种持久化的存储，和localStorage只能在同一域名下共享存储不同，你可以通过设置域名来指定共享的范围，比如作用在本级域名及所有子域名；或者作用于主域名下所有子域名；甚至还可以作用任何域名下。  
看样子这个使用起来很灵活，不过坏消息是从Firefox13开始就不再支持这个方法了，推荐使用localStorage了。  
  
基本用法：  
globalStorage\['developer.mozilla.org'\] —— 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。  
globalStorage\['mozilla.org'\] —— 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。  
globalStorage\['org'\] —— 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。  
globalStorage\[''\] —— 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。  
方法属性：  
setItem(key, value) —— 设置或重置 key 值。  
getItem(key) —— 获取 key 值。  
removeItem(key) —— 删除 key 值。  
设置 key 值：window.globalStorage\["planabc.net"\].key = value;  
获取 key 值：value = window.globalStorage\["planabc.net"\].key;

## indexedDB ##

IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。  
IndexedDB API 取代了 Web Storage API，后者在 HTML5 规范中已不推荐使用。  
与 Web Storage 相比，IndexedDB 具有多个优势，其中包括索引、事务处理和健壮的查询功能。  
IndexedDB的技术特点是，不需要你去写特定的sql语句来对数据进行操作，它是nosql的，数据形式使用的是json。  
目前最新的主流浏览器已经都支持此标准（IE从10开始支持）  
  
更多资料参考下面这些网站：  
  
W3官方标准说明、微软MSDN文档 、Mozilla官方文档、IBM介绍文档

原创地址：http://blog.csdn.net/rainday0310/article/details/20635343

\--- end ---